一个简单的文字特效

效果✨✨✨

应用在某些logo文字或title上感觉效果也挺不错的。

实现思路💡

 1️⃣ 将每个字符作为一个单体元素处理并渲染

 2️⃣ 给字符添加一个改变`color`以及`text-shadow`的animation关键帧

 3️⃣ 设置每个字符的`animation-delay`实现交错效果

代码✏️

 

<template><div class="text_color"><span v-for="item in textString" :key="item">{{ item }}</span></div>
</template><script setup lang="ts">
import { ref } from "vue";
const textString = ref("这是一段测试文字");
</script><style scoped lang="scss">
.text_color {height: 100%;background: #000;display: flex;justify-content: center;align-items: center;font-size: 50px;font-weight: bold;color: #faebd7;span {margin: 0 10px;animation: change 1s ease-in-out infinite alternate;}@for $i from 1 through 10 {span:nth-child(#{$i}) {animation-delay: $i * 0.1s;}}
}
@keyframes change {to {color: #ff0266;text-shadow: 20px 0 70px #ff0266;}
}
</style>

完结❤️