css中clip:rect用法

css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果.

top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的.
经典案例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}body{position: relative;background-color: #0f222b;}.div1{width: 200px;height: 200px;margin: 100px auto;background: url(img/Button-White-Large.png) no-repeat 50%/70% rgba(0,0,0,0.1);color: #69ca62;box-shadow: inset 0 0 0 1px rgba(105,202,98,0.5); }.div1,.div1::before,.div1::after{position: absolute;top: 0;left: 0;right: 0;bottom: 0; }.div1::before,.div1::after{content: '';z-index: -1;margin: -5%;box-shadow: inset 0 0 0 2px;animation: clipm 8s linear infinite;}.div1::before{animation-delay: -4s;}.div1:hover::after,.div1:hover::before{background-color: rgba(255,0,0,0.3);}@keyframes clipm{0%{clip: rect(0px,220.0px,2px,0px);/*裁剪*/}25%{clip: rect(0px,2px,220.0px,0px);}50%{clip: rect(218.0px,220.0px,220.0px,0px);}75%{clip: rect(0px,220.0px,220.0px,218.0px);}100%{clip: rect(0px,220.0px,2px,0px);}}</style></head><body><div class="div1"></div></body>
</html>

css中clip:rect用法相关推荐

css中hideFocus的用法
css中hideFocus的用法简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
css中clip属性的使用
css的clip属性经常用不到,使用率很低. 简述clip属性 w3c介绍clip属性: 通过元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了 ...
CSS 中 !important的用法总结
下面简要的给大家讲一下CSS 中一个比较重要的!important属性,从笔者的实践中总结了以下两点: 1.用于解决IE对某些CSS规范有偏差的情况. 比如在IE中的效果总是和其他的浏览器如firef ...
CSS中@support的用法
这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...
css中 media的用法,如何在css中正确使用@media
如何在css中使用@media作为特定分辨率?所以我想让我的侧栏更改取决于用户分辨率,所以我使用@media.如何在css中正确使用@media 这是示例代码: @media (max-width: ...
CSS中flex的用法( 学习笔记 )
flex( 弹性盒.伸缩盒 ) flex 的介绍 flex是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以随页面的大小的改变而改变弹性容器要使 ...
CSS中的cursor用法
CSS中的光标类型语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no ...

css中clip:rect用法

css中clip:rect用法相关推荐

最新文章

热门文章