纯 CSS 图片碎裂动画

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

蒙版

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

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

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

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

@property --c-0 {syntax: "";initial-value: 1;inherits: false;
}
@property --c-1 {syntax: "";initial-value: 1;inherits: false;
}

使用自定义属性重写蒙版

/* Omitting the @property blocks above for brevity */img {mask:linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */mask-size: 50% 100%;mask-repeat: no-repeat;transition: --c-0 0.5s, --c-1 0.3s 0.4s;
}img:hover {--c-0:0;--c-1:0;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！