前言
这次带来的效果十分有趣，可以把它比作为“下钱的雨云”，就是一种哗哗哗地从天空中的云里落钱的画面。话不多说，大家直接看到下面的效果预览。
效果预览
以上就是最终的实现效果了，咱们接下来便一步一步来实现它。
HTML
我们首先看到HTML部分，相关代码如下。
<div class="container">
<div class="cloud">
<h2>Data Clouds Rain</h2>
</div>
</div>
这里是一个简单的HTML结构，包含一个具有类名 container 的 <div> 元素中嵌套了一个具有类名 cloud 的 <div> 元素。
这一段简单的代码用于展示包含标题的“云”容器，后面将会添加CSS样式和JavaScript动态效果，以实现更丰富的页面设计和交互体验。
JS
然后我们来看到JS部分，这里是实现动态交互效果的关键。
<script>
const randomText = () => {
const text = "!@#$%^&*()_+",
letters = text[Math.floor(Math.random() * text.length)];
return letters;
};
const rain = () => {
const cloud = document.querySelector(".cloud"),
e = document.createElement("div");
e.classList.add("drop");
cloud.appendChild(e);
const left = Math.floor(Math.random() * 290),
size = Math.random() * 1.5,
duration = Math.random() * 1;
e.innerText = randomText();
e.style.left = left + "px";
e.style.fontSize = 0.5 + size + "em";
e.style.animationDuration = 1 + duration + "s";
setTimeout(() => {
cloud.removeChild(e);
}, 2000);
};
setInterval(() => {
rain();
}, 20);
</script>
下面我们对这段代码一一做出讲解。首先通过const randomText = () => { ... }定义一个函数 randomText，用于随机选择一组特定符号中的一个字母，并返回它。再通过const rain = () => { ... }定义一个函数 rain，用于创建和控制单个雨滴的动画效果。
然后选取具有类名 cloud 的元素，通过const e = document.createElement("div")创建一个 <div> 元素，用于表示雨滴。e.classList.add("drop")表示将雨滴元素添加 drop 类。cloud.appendChild(e)表示将雨滴元素添加到云元素中。
最后生成随机的左侧位置、大小和动画持续时间，并根据这些随机值设置雨滴元素的属性，并且在2秒后，移除雨滴元素，实现雨滴的消失效果。通过setInterval(() => { rain(); }, 20)每20毫秒调用一次 rain 函数，实现雨滴效果的连续下落。
整体上，我们利用 JavaScript 创建和控制雨滴元素，随机化它们的属性，使它们在页面上连续下落，每隔一段时间生成新的雨滴，从而实现类似下雨效果的动画。
CSS
接下来我们就要给整个效果添砖加瓦了。相关代码如下。
.container {
......
}
@keyframes animateColor {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
.container .cloud {
position: relative;
width: 300px;
z-index: 100;
filter: drop-shadow(0 0 35px var(--clr));
}
.container .cloud h2 {
......
}
.container .cloud h2::before {
......
}
.container .cloud h2::after {
......
}
.container .cloud .drop {
position: absolute;
top: 60px;
height: 20px;
line-height: 20px;
color: var(--clr);
transform-origin: bottom;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translateY(0) scaleY(0);
transform-origin: top;
}
10% {
transform: translateY(0) scaleY(0.25);
transform-origin: top;
}
20% {
transform: translateY(0) scaleY(1);
}
70% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
80% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
100% {
transform: translateY(300px) scaleY(0);
transform-origin: bottom;
text-shadow: -180px 0 0 var(--clr), 180px 0 0 var(--clr);
}
}
这里我们主要实现了一个动态的云和雨滴效果，只展示了部分关键代码，详细代码可以前往码上掘金查看。
首先是.container { ... }元素，设置了容器的样式，包括背景颜色的动画变化，实现了颜色的循环过渡效果。并且添加@keyframes animateColor { ... }动画，定义了颜色变化的关键帧动画，从 0% 到 100% 在色相上进行360度旋转变化。
然后是云元素样式。.container .cloud { ... }定义了云的样式，包括阴影和整体效果。.container .cloud h2 { ... }：设置标题的样式，包括文本样式、居中显示和背景颜色。
最后是雨滴元素样式和动画。.container .cloud .drop { ... }定义了雨滴元素的样式，包括位置、颜色和动画特效。并且添加@keyframes animate { ... }动画，定义了雨滴动画的关键帧，实现了雨滴垂直落下的效果，以及在落下期间的动画变化。
整体来看，这里利用 CSS 动画和关键帧设置，实现了页面元素的视觉动态变化。
总结
以上就是整个效果的实现过程了，代码简单易懂，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
