文字雨特效

效果展示

在这里插入图片描述

CSS 知识点

简易实现云朵技巧
text-shadow 属性的灵活运用
filter 属性实现元素自动变色

实现页面布局

<div class="container"><div class="cloud"><h2>Data Clouds Rain</h2></div>
</div>

实现云朵

实现云朵我们可以伪元素和box-shadow属性实现。

/* 实现云朵下文字部分 */
.container .cloud h2 {position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;color: #000;font-size: 2em;z-index: 100;font-weight: 400;padding: 0 10px;border-radius: 10px;text-transform: uppercase;background: var(--clr);
}
/* 实现云朵底部 */
.container .cloud h2::before {content: "";display: block;position: absolute;top: -115px;left: 50%;transform: translateX(-50%);width: 120%;height: 100px;border-radius: 200px;background: var(--clr);
}
/* 实现云朵头部 */
.container .cloud h2::after {/* 实现云朵头部小圆 */content: "";position: absolute;top: -150px;left: 25px;width: 120px;height: 120px;border-radius: 50%;background: var(--clr);/* 使用阴影完成云朵头部大圆 */box-shadow: 120px -30px 0 40px var(--clr);
}

通过上述代码实现后，可以看到如下的效果：

在这里插入图片描述

实现云朵自动颜色变化

元素自动变化颜色可以使用animation与filter属性的 hue-rotate 值来进行实现。

.container {position: relative;height: 400px;width: 100%;display: flex;justify-content: center;align-items: center;animation: animateColor 5s linear infinite;
}@keyframes animateColor {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}
}

使用 JavaScript 实现定时生成文字雨

function randomText() {const text = "abcdefghjklmnopqrstuvwsyz1234567890~!@#$%^&*()_+";letters = text[Math.floor(Math.random() * text.length)];return letters;
}function rain() {let cloud = document.querySelector(".cloud");let e = document.createElement("div");e.classList.add("drop");cloud.appendChild(e);let left = Math.floor(Math.random() * 300);let size = Math.random() * 1.5;let duration = Math.random() * 1;e.innerText = randomText();e.style.left = left + "px";e.style.fontSize = 0.5 + size + "em";e.style.animationDirection = 1 + duration + "s";// 回收落到地面后的文字，以免元素过多页面长生卡顿setTimeout(() => {cloud.removeChild(e);}, 2000);
}setInterval(() => {rain();
}, 20);

编写文字雨相应样式及动画

.container .cloud .drop {position: absolute;top: 60px;height: 20px;line-height: 20px;color: var(--clr);transform-origin: bottom;animation: textAnimation 2s linear infinite;
}@keyframes textAnimation {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) scale(1);transform-origin: bottom;}80% {transform: translateY(300px) scale(1);transform-origin: bottom;}100% {transform: translateY(300px) scale(0);transform-origin: bottom;text-shadow: -180px 0 0 var(--clr), 180px 0 0 var(--clr);}
}