先上效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--text-color: #f6f1e6;
--drops-color: #231d1c;
}
body {
background: var(--text-color);
font-family: Georgia, serif;
}
.canvas {
position: relative;
height: 100vh;
overflow: hidden;
}
.canvas--animated .puddle__letter {
-webkit-animation-play-state: running;
animation-play-state: running;
}
.puddle {
position: absolute;
display: flex;
transform: rotate(var(--r, 0deg)) translate(calc(-50% - var(--x, 0)), calc(-50% - var(--y, 0)));
top: 50%;
left: 50%;
color: var(--text-color);
font-size: 6vmin;
white-space: pre;
}
.puddle__letter {
transform: translateY(800px);
padding: 0.1em 0.2em;
margin: -0.1em -0.2em;
will-change: transform;
-webkit-animation: drop 800ms var(--delay) ease-out forwards paused;
animation: drop 800ms var(--delay) ease-out forwards paused;
}
.combined-puddles {
position: relative;
height: 100%;
z-index: -1;
filter: url(#drops-filter);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.combined-puddles .puddle__letter {
border-radius: 50%;
color: var(--drops-color);
background-color: currentColor;
}
.combined-puddles .puddle__letter--t-1 {
box-shadow: 0.0259077911em 0.0158195613em 0 0.156531918em currentColor;
}
.combined-puddles .puddle__letter--t-2 {
box-shadow: 0.0027610231em 0.0292517118em 0 0.0017377822em currentColor;
}
.combined-puddles .puddle__letter--t-3 {
box-shadow: 0.0014897121em 0.0208965418em 0 0.2029532073em currentColor;
}
.combined-puddles .puddle__letter--t-4 {
box-shadow: 0.0181212165em 0.0001267036em 0 0.2696130855em currentColor;
}
.combined-puddles .puddle__letter--t-5 {
box-shadow: 0.0299544544em 0.0155872295em 0 0.3927980665em currentColor;
}
.combined-puddles .puddle__letter--t-6 {
box-shadow: 0.0223628085em 0.013623193em 0 0.3951977831em currentColor;
}
.combined-puddles .puddle__letter--t-7 {
box-shadow: 0.017073126em 0.0166402911em 0 0.1251815461em currentColor;
}
.combined-puddles .puddle__letter--t-8 {
box-shadow: 0.0160218528em 0.0103797109em 0 0.2355980051em currentColor;
}
.combined-puddles .puddle__letter--t-9 {
box-shadow: 0.0061457537em 0.0272304962em 0 0.0502537243em currentColor;
}
.combined-puddles .puddle__letter--t-10 {
box-shadow: 0.0010890892em 0.0108737853em 0 0.2990892848em currentColor;
}
@-webkit-keyframes drop {
0% {
transform: translate(0, 100vh);
}
80% {
transform: translate(0, -5px);
}
100% {
transform: translate(0, 0);
}
}
@keyframes drop {
0% {
transform: translate(0, 100vh);
}
80% {
transform: translate(0, -5px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="canvas">
<div class="puddle" style="--x: 1.55em; --y: 3.73em">Roses are red</div>
<div class="puddle" style="--x: 1.5em; --y: 1.8em">Violets are blue</div>
<div class="puddle" style="--x: -1.5em; --y: -1.8em">Unexpected ";"</div>
<div class="puddle" style="--x: -1.3em; --y: -3.7em">On line 32</div>
</div>
</body>
<script>
class Droppy {
DEFAULT_OPTIONS = {
canvasSelector: ".canvas",
textSelector: ".puddle",
letterClassName: "puddle__letter",
dropsClassName: "combined-puddles",
delayBetweenDrops: 95,
dropTypes: 10,
wordAngleRange: [-3, 3]
};
constructor(opts) {
this.opts = { ...this.DEFAULT_OPTIONS, ...opts };
this.$textSelector = document.querySelectorAll(this.opts.textSelector);
this.$canvas = document.querySelector(this.opts.canvasSelector);
this.init();
}
init() {
this.injectSVGFilter();
this.wrapLetters();
this.addDelayToEachLetter();
this.createDrops();
this.startAnimation();
}
getRandomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
startAnimation() {
this.$canvas.classList.add("canvas--animated");
}
wrapLetters() {
this.$textSelector.forEach(($word) => {
const letters = Array.from($word.innerText).map((letter) => {
const dropType = this.getRandomInt(1, this.opts.dropTypes);
const className = `${this.opts.letterClassName} ${this.opts.letterClassName}--t-${dropType}`;
return `<div class="${className}">${letter}</div>`;
});
const angle = this.getRandomInt(
this.opts.wordAngleRange[0],
this.opts.wordAngleRange[1]
);
$word.style.cssText += `--r:${angle}deg`;
$word.innerHTML = letters.join("");
});
}
addDelayToEachLetter() {
const letters = document.querySelectorAll(`.${this.opts.letterClassName}`);
Array.from(letters, ($letter, index) => {
const delay = index * this.opts.delayBetweenDrops;
$letter.style.cssText += `--delay:${delay}ms`;
});
}
createDrops() {
const $drops = document.createElement("div");
$drops.className = this.opts.dropsClassName;
Array.from(this.$textSelector, ($word) =>
$drops.appendChild($word.cloneNode(true))
);
this.$canvas.appendChild($drops);
}
injectSVGFilter() {
const filter =
'<svg style="display:none;"><filter id="drops-filter" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm" /></filter></svg>';
this.$canvas.insertAdjacentHTML("beforeend", filter);
}
}
new Droppy();
</script>
</html>
