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后