html跳舞的文字动画效果（附源码）-邻兔跃IT—国内优质IT 技术领域、资源分享平台「邻兔跃 IT」邻兔跃IT

20250914092708832-image

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Bringing Text to Life</title>
    <style>
        body {
            background-color: #53d9d1;
            background-image: linear-gradient(135deg,
                    #53d9d1 0%,
                    #53d9d1 30%,
                    #f27b9b 30%,
                    #f27b9b 60%,
                    #eb7132 60%,
                    #eb7132);
            background-size: 280% 280%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            animation: move 10s linear infinite;
        }

        @keyframes move {
            0% {
                background-position: 0% 0%;
            }

            50% {
                background-position: 100% 100%;
            }

            100% {
                background-position: 0% 0%;
            }
        }

        p {
            font-size: 13px;
            line-height: 10px;
            background: url('https://s1.aigei.com/src/img/gif/c1/c19111ca40d54a26a876559acd10688f.gif?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:11YnZzVxDclBXiLP9p_-llGxVB4=');
            /* background: url("https://static.wixstatic.com/media/389726_4df1ca3802db4592862a33554653aa54.gif"); */
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-attachment: fixed;

            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;

            font-weight: 900;
        }
    </style>

</head>

<body>
    <p id="text"></p>

    <script>
        const p = document.getElementById('text');

        // 随机生成一个“单词”，长度在 3~8 之间
        function getRandomWord() {
            const letters = 'abcdefghijklmnopqrstuvwxyz';
            const length = Math.floor(Math.random() * 6) + 3; // 3 到 8 个字母
            let word = '';
            for (let i = 0; i < length; i++) {
                word += letters[Math.floor(Math.random() * letters.length)];
            }
            return word;
        }

        // 生成包含指定数量单词的字符串
        function getRandomWords(count) {
            const words = [];
            for (let i = 0; i < count; i++) {
                words.push(getRandomWord());
            }
            return words.join(' ');
        }

        const originalText = getRandomWords(50); // 每次 50 个随机单词
        let repeatedText = originalText + ' ';

        // 用 span 测量高度
        const temp = document.createElement('span');
        temp.style.visibility = 'hidden';
        temp.style.position = 'absolute';
        temp.style.fontSize = getComputedStyle(p).fontSize;
        temp.style.lineHeight = getComputedStyle(p).lineHeight;
        temp.style.width = p.offsetWidth + 'px';
        document.body.appendChild(temp);

        // 拼接直到填满整个页面
        while (true) {
            temp.textContent = repeatedText;
            if (temp.offsetHeight > window.innerHeight) {
                break;
            }
            repeatedText += getRandomWords(50) + ' ';
        }

        p.textContent = repeatedText;
        temp.remove();
    </script>
</body>

</html>

🎀 🌸

📜 重要提示：
如有解压密码：看下载页、看下载页、看下载页。
源码工具资源类具有可复制性：建议具有一定思考和动手能力的用户购买。
请谨慎考虑：小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知：虚拟类商品，一经打赏赞助，不支持退款。请谅解，谢谢合作！
邻兔跃官网：lt.lintuyue.com（如有解压密码看下载页说明）。

文章版权声明 1、本网站名称：邻兔跃lT
2、本站永久网址：https://lt.lintuyue.com/
3、本站内容主要来源于互联网优质资源整合、网友积极投稿以及部分原创内容，仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

文章版权归原作者所有，本站只做转载和学习以及开发者个人原创。声明：下载本站资源即同意用户协议，本站程序仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

THE END