一个简单的文字特效

效果✨✨✨

应用在某些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>

完结❤️