今天我们要实现一个这样的效果：首先我们页面上有一张完整的图像，然后当我们鼠标滑过图像的时候，让它一次消失一块，就像漂浮在微小的碎片中一样，从而达到碎片消失的效果。

具体实现方式不需要JavaScript处理，也不需要SVG。只有一个img和一些SCSS。

先看一个效果： 很酷，对吧？当然，但问题是。您必须在Chrome、Edge或Opera中查看这一点，因为这些浏览器是目前唯一支持@property的浏览器，这是实现这一想法的关键组件。我们不会让它阻止我们，因为这是一个很好的机会，可以让我们接触到很酷的 CSS 功能，例如蒙版和借助@property。

完整代码如下：

HTML代码：

SCSS代码：

遮罩有时很难概念化，常常与剪裁混淆。底线是：遮罩是图像。当图像作为遮罩应用于元素时，图像的任何透明部分都允许我们直接看到元素。任何不透明部分都将使图元完全可见。

遮罩的工作方式与不透明度相同，但位于同一元素的不同部分。这与剪切不同，剪切是一种路径，路径之外的所有内容都被简单地隐藏。掩蔽的优点是我们可以在同一个元素上有我们想要的任意多的掩蔽层 — 类似于我们如何在背景图像上链接多个图像。

由于遮罩是图像，我们可以使用CSS渐变来制作它们。让我们举一个简单的例子来更好地理解这个技巧。

在这里，我们在图像上定义了两个遮罩层。它们都是纯色，但 alpha 透明度值不同。上面的语法可能看起来很奇怪，但它是一种简化的编写方式linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8))。

值得注意的是，我们使用的颜色无关紧要，因为默认遮罩模式是alpha，alpha值是唯一相关的东西。我们的梯度可以是linear-gradient(rgba(X,Y,Z,0.8) 0 0)，其中 X，Y和Z是随机值。

每个遮罩层等于50% 100%（或图像的半宽和全高）。一个面罩覆盖左侧，另一个覆盖右侧。最后，我们有两个不重叠的遮罩覆盖了图像的整个区域，正如我们之前讨论的，每个遮罩都有一个不同定义的 alpha 透明度值。 由上图可以看出使用两个线性渐变创建的两个蒙版层。左侧的第一个渐变的 alpha 值为 0.8。右侧的第二个渐变的 alpha 值为 0.5。第一个渐变更不透明，意味着更多的图像显示出来。第二个渐变更透明，意味着更多的背景显示出来。

我们想要做的是将动画应用于蒙版的线性渐变alpha值以创建透明动画。稍后，我们会将这些制作成异步动画，以创建碎片效果。

动画渐变是我们在CSS中无法做到的。也就是说，直到我们得到@property的有限支持。同样，您需要在Chrome或其他支持Blink的浏览器中查看此内容： CSS代码：

简而言之，@property允许我们创建自定义CSS属性，在这里我们可以通过指定类型来定义语法。让我们创建两个属性–c-0和–c-1，它们接受一个初始值为1的数字。

这些属性将表示CSS掩码中的alpha值。由于它们都默认为完全不透明（即1），因此整个图像通过遮罩显示。下面是如何使用自定义属性重写掩码：

我们在这里所做的就是为每个自定义变量应用不同的转换持续时间和延迟。继续并将图像悬停。遮罩的第一个渐变将淡出到alpha值0，以使图像完全透明，然后是第二个渐变。

HTML代码：

CSS代码：

效果如下：

到目前为止，我们只使用了遮罩上的两个线性渐变和两个自定义属性。要创建平铺或碎片效果，我们需要更多的平铺，这意味着更多的渐变和许多自定义属性！

SCSS使这成为一项相当简单的任务，因此这就是我们从现在开始写作风格的方法。正如我们在第一个例子中看到的，我们有一种瓷砖矩阵。我们可以将它们视为行和列，因此让我们定义两个SCSS变量， x 和 x和 x和y来表示它们。

我们需要@property为每一个定义。但是，没有人想手动写出所有这些，所以让 SCSS 通过循环运行我们的属性来为我们完成繁重的工作：

然后我们让它们全部进入0悬停状态：

我们将编写一个@mixin为我们生成它们的代码：

我们所有的蒙版层大小相同，因此我们只需要一个属性，依赖于 x 和 x和 x和y变量和calc()（更多关于calc()用法）：

您可能也注意到了这一行：

在相同的混合中，我们还将生成包含所有先前定义的自定义属性的transition属性。

最后，由于SCSS中的random()函数，我们为每个属性生成了不同的持续时间/延迟。

现在我们要做的就是调整 x 和 x和 x和y变量来控制我们碎片的粒度。

公共HTML代码：

我们还可以更改随机配置以考虑不同类型的动画。

SCSS代码：

效果如下： 在上面的代码中，我定义了transition()如下函数：

通过调整公式，我们可以得到不同种类的动画。只需取消您想要使用的注释。这份清单并非详尽无遗 — 通过考虑更多的forumlas，我们可以有任何组合(我让您想象一下，如果我们添加高级数学函数，比如sin()、sqrt()等，可能会发生什么。）

我们仍然可以通过调整渐变来处理我们的代码，这样我们就可以为颜色停止设置动画而不是 alpha 值的动画。我们的渐变看起来像这样：

然后我们将变量从100%到 进行动画处理0%。而且，嘿，我们不必坚持使用线性渐变。为什么不是径向的？

SCSS代码 :

效果如下： 就像过渡一样，我们可以定义任何我们想要的渐变——组合是无限的！

让我们引入另一个变量来控制渐变蒙版之间的重叠。此变量将设置mask-size如下：

如果等于 ，则没有重叠1。如果它更大，那么我们确实得到了重叠。这使我们可以制作更多种类的动画：

SCSS代码：

效果如下：

原理很简单，我们所要做的就是找到变量和公式之间的完美组合，以创造出惊人而疯狂的图像碎片效果。

原文链接：https://www.mybj123.com/12567.html