您的位置:首页 > Web前端 > CSS

CSS 通过clip-path属性定义动画

2019-08-06 17:30 1221 查看
原文链接:http://www.cnblogs.com/iamlhr/p/11308493.html

1.clip-path 属性介绍

clip-path 
属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。

剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。

clip-path属性代替了现在已经弃用的剪切clip属性。

 2.clip-path属性使用

①多边形

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

②圆形

clip-path: circle(0 at 50% 50%);  //circle(半径 at 圆心坐标)

③椭圆

clip-path: ellipse(130px 140px at 10% 20%);

④路径

clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

3.clip-path属性在动画中的使用

.in {
animation: clipDiamondIn .6s;
}
@keyframes clipDiamondIn {
0%   {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
100% {
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
}
}

4.鼠标经过动画

.box img{
width: 500px;
height: 312px;
transition: all 0.5s ease;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.box:hover img{
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
clip-path: polygon(50% 0, 99% 50%, 50% 99%, 0 50%);
}

 效果图

hover前                                                                     hover后

 

转载于:https://www.cnblogs.com/iamlhr/p/11308493.html

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: