冷文学习者 - scss
type: channel
link: https://www.kevinlu98.cn/tag/scss/
items: 纯 CSS 图片碎裂动画教程

纯 CSS 图片碎裂动画教程
type: item
date: 2022-01-24T16:48:00+08:00
description: 纯CSS图片碎裂动画教程前言最近看到一篇文章是关于css做图片销毁图片效果的，觉得不错，就给大家翻译过来分享一下，原文地址：传送门文章开始，先来通过GIF动图展示一下最后的开发成果。没有JavaScript处理，没有SVG。只使用单个 和一些CSS渲染。当我们将鼠标悬停在图片上，即可看到魔法效果。效果展示是不是很酷？好吧，我不得不承认这不仅是CSS，因为还有SCSS，但是它仍然算是纯CSS效果，但没有涉及JS。上述效果包含两个过程。蒙版动画渐变蒙版蒙版有时很难概念化，并且常常与剪切相混淆。最重要的是：蒙版是图像。当将图像用作蒙版应用于元素时，图像的任何透明部分都允许我们直接通过元素看到。任何不透明的部分都会使元素完全可见。蒙版的工作方式与不透明度（opacity）相同，只是它们作用在同一个元素的不同部分上。这与剪切不同，剪切是将路径之外的所有内容都隐藏起来的路径。蒙版的优点在于，在同一个元素上可以具有任意数量的图层蒙版——与在background-image上链接多个图像的方式类似。下面举一个简单的例子以便于更好地理解这一技巧(左边是原图，右边是加入蒙版的).img-mask { mask: linear-gradient(rgba(0, 0, 0, 0.8) 0 0) left, linear-gradient(rgba(0, 0, 0, 0.5) 0 0) right; mask-size: 50% 100%; mask-repeat: no-repeat; } Document 我们在图像上定义了两个图层蒙版，都是纯色的，但是alpha透明度值不同。值得注意的是，使用何种颜色无关紧要，因为默认的mask-mode为alpha。唯一有重大关系的就是alpha值。渐变可以是linear-gradient(rgba(X,Y,Z,0.8) 0 0)，其中X，Y和Z都是随机值。每个图层蒙版尺寸为50% 100%（或图像的一半宽度和全部高度）。一个图层蒙版覆盖左侧，另一个覆盖右侧。然后，我们得到了两个不重叠的蒙版，它们覆盖了图像的整个区域，并且正如我们前面所说，每个蒙版定义的alpha透明度值不同。动画渐变我们要做的是将动画应用于蒙版的线性渐变alpha值，以创建透明动画。稍后，我们再将它们制作成异步动画，以创建碎片效果。动画渐变是我们在CSS中无法做到的。但是，现在我们有@property的支持，尽管支持是有限的。简而言之，@property允许我们创建自定义的CSS属性，其中我们可以通过指定类型来定义语法。下面让我们创建两个属性--c-0和--c-1，初始值为1。@property --c-0 { syntax: "<number>"; initial-value: 1; inherits: false; } @property --c-1 { syntax: "<number>"; initial-value: 1; inherits: false; }这些属性将代表CSS蒙版中的alpha值。并且由于它们都默认为完全不透明的（因为值为1），因此整个图像会通过蒙版显示。下面是我们如何使用自定义属性重写蒙版的方法：.img-mask { -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, var(--c-0)))) left, -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, var(--c-1)))) right; -webkit-mask: linear-gradient(rgba(0, 0, 0, var(--c-0)) 0 0) left, linear-gradient(rgba(0, 0, 0, var(--c-1)) 0 0) right; mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, var(--c-0)))) left, -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, var(--c-1)))) right; mask: linear-gradient(rgba(0, 0, 0, var(--c-0)) 0 0) left, linear-gradient(rgba(0, 0, 0, var(--c-1)) 0 0) right; -webkit-mask-size:…