HTML、CSS、JS创作炫酷的“文字雨“动画！

作者：掘一
链接：https://juejin.cn/post/7270648629378367528
来源：稀土掘金

最近有点空闲时间打算学习一些有意思的动画，浏览和学习的过程中发现了文字雨的动画，仅此博客记录分享一下代码。

完整代码

定时器： 为了让字符(雨滴)持续下落，使用 setInterval 函数和一个时间间隔值来调用 rainEffect() 函数。这样就是每20毫秒就会生成一个新的字符(雨滴)节点并添加到云朵中。

• 首先是类名为container的容器，表示整个动画的容器；
• 其次是类名为cloud的容器，表示云朵的容器；
• 接着是cloud容器中的文字元素，表示雨滴(即文字元素)
• 使用了自定义的颜色变量来为背景色和文本颜色提供值，有助于使代码易于维护和修改；
• 利用CSS的阴影效果和动画功能，创造逼真的"云朵"和流畅的"雨滴"动画；

• 最后，使用JavaScript来实现文字雨的效果。通过动态生成并随机选择字符，可以实现让这些字符(雨滴)从.cloud(云朵)中降落的效果。JavaScript 脚本逻辑：

• 首先，定义函数 generateText() 并创建字符集，定义函数 randomText() 通过从给定的字符集中随机选择一个字符返回；
• 接下来，编写 rainEffect() 函数，在函数内部，首先选取 .cloud 元素同时创建一个新的
  元素作为字符节点，设置元素文本内容为函数返回的字符，并添加类名；
• 然后，利用 Math.random() 方法生成一些随机值，将这些随机值应用到创建的
  元素上，包括：

  • 字符距离左侧位置，在 .cloud 容器的宽度区间；
  • 字体大小，最大不超过32px；
  • 动画周期所需的时间(动画持续时间)，2s内；
• 最后，将其
  添加到 .cloud 元素中，使用 setTimeout() 函数在2秒后将文字节点从 .cloud 元素中移除，模拟雨滴落地消失效果；