粒子动画，顾名思义，就是用页面上的大量粒子构建的动画。传统的粒子动画主要通过Canvas和WebGL来实现。当然，不使用HTML+CSS的主要原因是粒子动画通常需要的粒子比较多，而如果使用HTML+CSS，必然需要过多的DOM元素，这就导致了使用HTML+CSS构建的粒子动画有在性能上没有优势。当然，如果单从效果来看，用CSS搭建出来的粒子动画也可以很震撼。在本文中，我们将尝试使用CSS构建粒子动画。工欲善其事，必先利其器。OK，绘制CSS粒子动画首先要有好的工具。本文将继续使用CSS-Doodle来完成所有功能。但请注意，CSS-Doodle可以理解为一个语法糖库，使用它实现的所有效果都可以用CSS+HTML重现（可能有些会加一点SVG）。简单的说，CSS-doodle是一个基于Web-Component的库。让我们可以快速创建基于CSSGrid布局的页面，并提供各种方便的指令和功能（随机、循环等），让我们通过一套规则获得不同的CSS效果。你可以简单的看一下它的主页——CSS-doodle主页，5分钟就能快速上手。使用CSS-Doodle构建粒子要实现粒子动画，第一步是获取大量的粒子。如果用CSS实现，那意味着我们需要大量的DOM。借助CSS-Doodle的Grid布局语法，我们可以快速获取大量的DOM，当然方法有很多种。现在假设我们需要10000个粒子，我们只需要实现一个100x100的Grid布局，如果使用CSS-Doodle，语法如下：:doodle{@size:100vw100vmin;}位置：绝对；顶部：50%；左：50%；宽度：2px；高度：2px；背景：#000；border-radius:50%;简单解释一下上面的代码：grid="100x100"表示实现一个100x100的Grid布局@size:100vw100vmin表示Grid布局的高和宽分别为100vw和100vh分别，也就是剩下的占据整个屏幕的代码比较容易理解，会分配给每个Griditem，相当10,000个Griditem都是一个2x2的球，它们位于页面中间.整体效果如下：你没有看错，因为所有的粒子都堆在一个点上，所以确实只有一个点。此时，我们有10,000个粒子聚集在一起。实现2D粒子效果10000个粒子聚集在一起，我们可以给每个粒子添加任意不同的属性，就可以得到各种粒子效果。为了让粒子看得清楚，第一步就是让粒子散开。这里我们只需要改变上面代码中的top和left定位即可（也可以使用transform）：//...其他和上面一致top:@r(1%,100%);左：@r(1%,100%)；//...其他和上面一致CSS-在Doodle中可以使用@r()方法获取随机数，也就是获取1%~100%范围内的随机数。在这里，我们只是让每个粒子的顶部和左侧随机落在1%~100%之间，这样我们就可以清楚地看到不同的粒子分布：嗯，这里还没有体现出美感。别担心，我们尝试随机放大和缩小每个粒子，并赋予它们不同的颜色：//...其他的和上面的背景一致：hsl(@r(1,255,3),@r(10%,90%),@r(10%,90%);transform:scale(@rn(.1,5,3));这样，我们的粒子就变成了这样：嗯，看起来像那样。当然，粒子动画怎么可能没有动画呢？下一步我们需要让粒子动起来，因为动画需要用到transform:translate()，但是我们上面用的是scale()。为了减少代码量，这里我将缩放操作通过zoom属性来实现。这样，完整的代码如下：:doodle{@size:100vw100vmin;视角：10px；}位置：绝对；顶部：@r(1%,100%)；左：@r(1%,100%)；宽度：2px；高度：2px；背景：#000；边界半径：50%；背景：hsl(@r(1,255,3),@r(10%,90%),@r(10%,90%));变换:旋转(@r(360deg))翻译(@r(-50,50)vmin,@r(-50,50)vmin);动画：移动3s无限线性交替；缩放：@rn(.1,5,3);@keyframes移动{100%{变换：旋转（0）翻译（0、0）；}}效果如下：看起来还不错，但是由于所有粒子的动画时间都是一样的，所以动画的起始帧和结束帧很明显，我们来改造一下动画：-动画：移动3s无限线性交替；+动画：移动@r(5,15)s无限@r(-10,0)s@p(linear,ease-in,ease-in-out)alternate;这样动画时间、负延迟时间（提前开始）、动画缓动都设置为每个粒子随机，这样整体效果会好很多。会有明显的停顿或瑕疵：完整代码可以点击这里：CSSDoodle-CSSPatternEffect当然我们可以完全改变配色方案，使用黑色背景色配合box-shadow()来制作每一个elementshine，这样就得到了这样一个效果：完整代码，可以戳这里：CSSDoodle-CSSPatternEffectPerlinnoisewith3D实现粒子动画。还记得我们在使用噪声构建漂亮的CSS图形噪声一文中提到过Berlin吗？Perlin噪波基于随机性，并在此基础上使用缓动曲线进行平滑插值，使得最终的噪波效果更加自然。它的作用就是我们生成的随机性不是完全随机的，而是可以像木头的纹理，高低起伏的山峰一样有一定的规律性！基于Perlin噪声，我们在2D粒子动画的基础上引入CSS3D实现3D粒子动画。让我们来看看，在这一点上，我们不是随机定位每个粒子，而是使用Perlin噪声来分布我们的粒子：是的，在CSSDoodle中，我们使用@rn()而不是@r()，就是这样让随机结果成为基于Griditem的位置关系进行关联。:doodle{@size:100vw100vmin;视角：10px；}:container{透视图：100px；变换样式：保留3d；0;宽度：2px；高度：2px；边界半径：50%；左：50%；顶部：50%；背景：hsl(@rn(1,255,3),@rn(50%,90%),@rn(50%,90%));变换：缩放（@rn（1、10、3））translate3d（@rn（-50、50、3）vw，@rn（-50、50、3）vh，@rn（-100、20）px）;在3D场景中，我们使用Perlin噪声来布局我们的粒子系统，使它们之间的颜色和位置相互关联。本身，每一个随机的时间都是一幅美妙的画，感受一下：当然，这还没有结束，我们需要让他们动起来。添加什么？事实上，添加任何东西都非常NICE。在这里，我们尝试让它们有规律地上下移动。当然，我们还需要使用Perlinnoise，所以完整的代码会变成：:doodle{@size:100vw100vmin;视角：10px；}:container{透视图:50px;变换样式：保留3d；}位置：绝对；顶部：0；左：0；宽度：2px；:50%;左：50%；顶部：50%；背景：hsl(@rn(1,255,3),@rn(50%,90%),@rn(50%,90%));变换：缩放（@rn（1、10、3））translate3d（@rn（-50、50、3）vw，@rn（-50、50、3）vh，@rn（-100、20）px）;动画：移动@rn(5,15,3)s无限@rn(-20,-10,3)s线性交替；框阴影：001px#fff，005px#fff；@keyframes移动{100%{margin-top:500px;}}好的，它会是什么样子？来看一下：可以看出柏林噪声产生的粒子效果更加逼真，看起来更加精彩。完整代码可以点击这里：CSSDoodle-CSSPatternEffect当然，在掌握了这个技巧之后，我们可以尝试添加其他属性的其他动画，那么说不定会得到这样的动画：完整代码，你可以点击这里：CSSDoodle-CSSPatternEffect或者，我们尝试实现另一种时空旅行的感觉：:doodle{@size:100vw100vmin;}:container{透视图：500px；变换样式：preserve-3d；变换：rotate3d(@r(-1.5,1.5),@r(-1.5,1.5),@r(-1.5,1.5),@r(0,30)deg);}位置：绝对；顶部：0；左：0；宽度：2px；高度：2px；边界半径：50%；顶部：@r(50,50)%；左：@r(50,50)%；(@rn(160,170,3),@r(90%,99%),@rn(50%,70%);动画：移动@r(5,30)s无限@r(-30,-15)s@p(linear,ease-in,ease-in-out);变换：缩放（@rn（.1，1））旋转（0）translate3d（@r（-60vmin，60vmin），@r（-60vmin，60vmin），@r（-1500，-2000）px）；框阴影：000.5px#fff，002px#fff，005px#fff；@keyframes移动{100%{变换：scale(10)旋转(1080deg)translate3d(0,0,@r(710,850)px);}}}}效果如下：完整代码，可以点这里：CSSDoodle-CSSPatternEffectCSS-Doodle库的作者远川老师也有很多3D粒子动画，一个其中：完整代码CSSDoodle-SeedingByyuanchuan其实有很多属性适合加入到整个粒子系统中。本文只是介绍，只是尝试CSS中的属性非常少。是的，CSS也可以实现这些超级炫酷的粒子动画效果。如果你也动心了，不妨自己尝试一下。我相信你会喜欢CSS。最后，本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
