纯 CSS 图片碎裂动画

效果：鼠标悬停在图片上，图片出现炸裂，包含蒙版和动画渐变两个过程

蒙版

1.  
   img {
2.  
   mask:
3.  
   linear-gradient(rgba(0,0,0,0.8) 0 0) left, /* 1 */
4.  
   linear-gradient(rgba(0,0,0,0.5) 0 0) right; /* 2 */
5.  
   mask-size: 50% 100%;
6.  
   mask-repeat: no-repeat;
7.  
   }

每个图层蒙版尺寸为50% 100%（或图像的一半宽度和全部高度）。一个图层蒙版覆盖左侧，另一个覆盖右侧。然后，我们得到了两个不重叠的蒙版，它们覆盖了图像的整个区域，并且正如我们前面所说，每个蒙版定义的alpha透明度值不同

动画应用于蒙版的线性渐变alpha值，以创建透明动画，创建碎片效果

@property允许我们创建自定义的CSS属性，其中我们可以通过指定类型来定义语法。下面让我们创建两个属性--c-0和--c-1，初始值为1

1.  
   @property --c-0 {
2.  
   syntax: "<number>";
3.  
   initial-value: 1;
4.  
   inherits: false;
5.  
   }
6.  
   @property --c-1 {
7.  
   syntax: "<number>";
8.  
   initial-value: 1;
9.  
   inherits: false;
10.  
    }

使用自定义属性重写蒙版

1.  
   /* Omitting the @property blocks above for brevity */
2.  
    
3.  
   img {
4.  
   mask:
5.  
   linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left, /* 1 */
6.  
   linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
7.  
   mask-size: 50% 100%;
8.  
   mask-repeat: no-repeat;
9.  
   transition: --c-0 0.5s, --c-1 0.3s 0.4s;
10.  
    }
11.  
     
12.  
    img:hover {
13.  
    --c-0:0;
14.  
    --c-1:0;
15.  
    }

这篇好文章是转载于：学新通技术网