分享一个有意思的文字飞入动画（模仿水滴融合）-Toy模板网

这篇具有很好参考价值的文章主要介绍了分享一个有意思的文字飞入动画（模仿水滴融合）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先上效果图：
分享一个有意思的文字飞入动画（模仿水滴融合）
代码如下：文章来源地址https://www.toymoban.com/news/detail-428819.html

<!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>