文字光影效果

给每个文字设置一个改变颜色的动画并使用alternate往返执行, 然后对每个文字设置一个animation-delay动画延迟

javascript

<script setup>
    import { onMounted } from 'vue';

    onMounted(() => {
        // 创建容器元素
        const container = document.getElementById('hello_world_container');
        
        // 定义要显示的文本
        const text = 'Hello World!';
        
        // 动态生成每个字符的span元素
        for (const char of text) {
            const span = document.createElement('span');
            span.textContent = char;
            container.appendChild(span);
        }
        
        // 动态生成动画延迟样式
        const style = document.createElement('style');
        const spans = document.querySelectorAll('#hello_world_container span');
        const delayIncrement = 0.2; // 每个字符的延迟增量（秒）
        
        spans.forEach((span, index) => {
            style.innerHTML += `
                #hello_world_container span:nth-child(${index + 1}) {
                    animation-delay: ${(index) * delayIncrement}s;
                }
            `;
        });
        
        document.head.appendChild(style);
    });
    // 动态生成动画延迟样式可以使用scss语法简写
    // @for $i from 1 through 11 {
    //     span: nth-child(#{$i}) {
    //         animation-delay: ($i - 1) * 0.2s;
    //     }
    // }
</script>

css

<style>
#hello_world_container {
    text-align: center;
    margin: 10px auto;
    font-size: 5rem;
    letter-spacing: 0.2rem;
}

#hello_world_container span {
    color:rgb(161, 240, 247);
    animation: colorChange 1s infinite ease-in-out alternate;
}

@keyframes colorChange {
    to {
        color:rgb(135, 163, 247);
    }
}
</style>

html

<div id="hello_world_container">
</div>