访客 先上效果图：
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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.1em0.2em;margin:-0.1em-0.2em;will-change:transform;-webkit-animation:drop800msvar(--delay)ease-outforwardspaused;animation:drop800msvar(--delay)ease-outforwardspaused;}.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.0259077911em0.0158195613em00.156531918emcurrentColor;}.combined-puddles.puddle__letter--t-2{box-shadow:0.0027610231em0.0292517118em00.0017377822emcurrentColor;}.combined-puddles.puddle__letter--t-3{box-shadow:0.0014897121em0.0208965418em00.2029532073emcurrentColor;}.combined-puddles.puddle__letter--t-4{box-shadow:0.0181212165em0.0001267036em00.2696130855emcurrentColor;}.combined-puddles.puddle__letter--t-5{box-shadow:0.0299544544em0.0155872295em00.3927980665emcurrentColor;}.combined-puddles.puddle__letter--t-6{box-shadow:0.0223628085em0.013623193em00.3951977831emcurrentColor;}.combined-puddles.puddle__letter--t-7{box-shadow:0.017073126em0.0166402911em00.1251815461emcurrentColor;}.combined-puddles.puddle__letter--t-8{box-shadow:0.0160218528em0.0103797109em00.2355980051emcurrentColor;}.combined-puddles.puddle__letter--t-9{box-shadow:0.0061457537em0.0272304962em00.0502537243emcurrentColor;}.combined-puddles.puddle__letter--t-10{box-shadow:0.0010890892em0.0108737853em00.2990892848emcurrentColor;}@-webkit-keyframesdrop{0%{transform:translate(0,100vh);}80%{transform:translate(0,-5px);}100%{transform:translate(0,0);}}@keyframesdrop{0%{transform:translate(0,100vh);}80%{transform:translate(0,-5px);}100%{transform:translate(0,0);}}</style></head><body><divclass="canvas"><divclass="puddle"style="--x:1.55em;--y:3.73em">Rosesarered</div><divclass="puddle"style="--x:1.5em;--y:1.8em">Violetsareblue</div><divclass="puddle"style="--x:-1.5em;--y:-1.8em">Unexpected";"</div><divclass="puddle"style="--x:-1.3em;--y:-3.7em">Online32</div></div></body><script>classDroppy{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)=>{returnMath.floor(Math.random()*(max-min1))min;};startAnimation(){this.$canvas.classList.add("canvas--animated");}wrapLetters(){this.$textSelector.forEach(($word)=>{constletters=Array.from($word.innerText).map((letter)=>{constdropType=this.getRandomInt(1,this.opts.dropTypes);constclassName=`${this.opts.letterClassName}${this.opts.letterClassName}--t-${dropType}`;return`<divclass="${className}">${letter}</div>`;});constangle=this.getRandomInt(this.opts.wordAngleRange[0],this.opts.wordAngleRange[1]);$word.style.cssText=`--r:${angle}deg`;$word.innerHTML=letters.join("");});}addDelayToEachLetter(){constletters=document.querySelectorAll(`.${this.opts.letterClassName}`);Array.from(letters,($letter,index)=>{constdelay=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(){constfilter='<svgstyle="display:none;"><filterid="drops-filter"x="-50%"width="200%"y="-50%"height="200%"color-interpolation-filters="sRGB"><feGaussianBlurin="SourceGraphic"stdDeviation="8"result="blur"/><feColorMatrixin="blur"mode="matrix"values="10000010000010000021-7"result="cm"/></filter></svg>';this.$canvas.insertAdjacentHTML("beforeend",filter);}}newDroppy();</script></html>