css文本连续光影特效

• vue中sass实现文本连续光影特效

<template>
  <div class="contain-box">
    <div class="box">
      <span>C</span><span>O</span><span>L</span><span>O</span><span>R</span
      ><span>F</span><span>U</span><span>L</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TestPractise",
});
</script>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.contain-box {
  height: 100vh;
  width: 100%;
  background-color: black !important;
}

.box {
  color: #fff;
  text-align: center;
  font-size: 50px;
  padding: 100px 0;
}

span {
  margin: 0 20px;
  animation: spread 1s ease-in-out infinite alternate;
}

@keyframes spread {
  to {
    color: #255;
    text-shadow: 20px 0 70px #255;
  }
}
@for $i from 1 through 8 {
  span:nth-child(#{$i}) {
    // 延时 下一位比上一位延时0.2s
    animation-delay: ($i - 1) * 0.2s;
  }
}
</style>

• 效果图