使用不透明度、缩放、平移、甚至可见性和显示将 Web 元素从一种状态转换到另一种状态的想法已经变得非常普通和陈旧，虽然它并没有那么糟糕，但它必须前进，迈出新的一步，成为别的东西，今天我向您介绍一种类似魔法的灵感效果，可以使用任何东西（例如字母、矩形、圆形，甚至图像的采样粒子）将元素消失！ （你能想象吗）。

因此，我们的想法是将我们的元素更改为某种部件，如果它是像标题这样的文本元素，那么这些部件可能来自它，它们将是字母，如果它是图像，它们将被采样为彩色粒子，现在下面的 CodePen 显示了创建效果的基本概念：

正如您所看到的，上面的示例显示部件居中，并且当它们被动画化时，它们使用如下实用函数从居中位置转换为随机位置：

const rand = (min, max) => Math.floor(Math.random() * (max - min)   min)

但是现在为了实现Poof效果，我们需要在粒子动画之前隐藏我们的初始元素，我使用缩放来隐藏它，这种缩放也会影响我们的粒子，为了防止我们需要创建一个元素来包含我们的粒子，这个元素必须与我们的初始元素相似，当我们完成初始元素的缩放动画和粒子中每个粒子的噗噗动画完成后，我们将删除初始元素以及包含粒子的元素

请注意，我创建了 2 个数组，一个用于粒子“命名部分”，一个用于动画，第二个数组将传递给 Promise.all 方法来计算动画的完成情况，而无需使用硬-编码的 setTimouts

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

如果我们将粒子绝对定位在类似网格的形式而不是居中位置，并且这种形式将位于行和列中，使用主 for 循环来定位行并使用嵌套的 for 循环来定位，会发生什么列

效果完成！但是使用云图像而不是彩色矩形怎么样，甚至用初始元素的颜色对其进行着色，使用两个堆叠的背景图像，一个是初始元素颜色的线性渐变，第二个是云的实际图像，然后应用乘法的背景混合模式，以及使用云的遮罩图像遮罩粒子元素

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

正如我在文章的第一篇中所说，图像有一种 poof 效果，它使用其像素从中采样颜色，然后将这些颜色用于粒子，因此这种图像的 poof 效果将是我们即将发表的文章

如果你来到这里，这意味着你已经阅读完毕，并且对这种东西有某种痴迷，所以通过点赞/爱来表达吧❤️。

关注我了解更多？✅
开发到
推特/X
链接