CSS 通过clip-path属性定义动画
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后