文字动画效果句子_html 动画文字-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58149406/article/details/145623059
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anime.js Text Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        .sentence-container {
            font-size: 1em;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
            margin-bottom: 20px;
            letter-spacing: 1px; /* 修改这个值来调整字符间距 */
            line-height: 1px; /* 修改这个值来调整行高 */
        }
        .char {
            display: inline-block;
            opacity: 0;
            margin-right: 0px; /* 修改这个值来调整字符之间的间距 */
        }
        /* 调整第3句话的文字颜色 */
        .third-sentence {
            color: #FF5733; /* 修改为你想要的颜色 */
            font-size: 2em;
        }

        /* 调整第3句话的字符间距 */
        .third-sentence .char {
            letter-spacing: 2px; /* 修改为你想要的字符间距 */
            line-height: 20px; /* 修改这个值来调整行高 */
        }
    </style>
</head>
<body>

<div id="text-container"></div>

<!-- 引入 anime.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<!-- 自定义动画脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 文字列表和时间间隔
        const textlist = ["thank you", "you are good", "你看起来很美"];
        const timelist = [1,2 ,3]; // 每个句子出现的时间间隔（秒）

        // 获取文本容器
        const textContainer = document.getElementById('text-container');

        // 遍历 textlist，为每个句子创建动画
        textlist.forEach((text, index) => {
            // 创建一个新的句子容器
            const sentenceDiv = document.createElement('div');
            sentenceDiv.classList.add('sentence-container');
           // 如果是第3句话，添加特定的类
            if (index === 2) {  // 索引从0开始，所以第3句话的索引是2
                sentenceDiv.classList.add('third-sentence');
            }
            textContainer.appendChild(sentenceDiv);

            // 将句子拆分为字符并为每个字符创建 span 标签
            text.split('').forEach(char => {
                const span = document.createElement('span');
                span.classList.add('char');

                // 如果字符是空格，使用 &nbsp; 来表示空格
                if (char === ' ') {
                    span.innerHTML = '&nbsp;';
                } else {
                    span.textContent = char;
                }

                sentenceDiv.appendChild(span);
            });

            // 使用 anime.js 创建动画，并根据 timelist 控制延迟
            setTimeout(() => {
                anime.timeline({loop: false})
                    .add({
                        targets: sentenceDiv.querySelectorAll('.char'),
                        opacity: [0, 1],
                        translateY: [50, 0],
                        easing: "easeOutElastic(1, .8)",
                        duration: 1000,
                        delay: (el, i) => 50 * i
                    });
            }, timelist[index] * 1000); // 将时间间隔转换为毫秒
        });
    });
</script>

</body>
</html>