文字连续光影特效实现思路

文字连续光影特效实现思路

实现了一个文字阴影的效果，文字会不断变换颜色并产生阴影效果。具体实现如下：

1. 使用 @keyframes 定义一个名为 shadow 的动画，动画从当前颜色到 #ff0266，同时设置文字阴影的偏移量和模糊半径。
2. 使用 * 选择器将所有元素的 margin 和 padding 设置为 0。
3. 将 body 的样式设置为居中对齐，背景颜色为 #1e1f25，高度为 100vh，字体大小为 66px，字体加粗。
4. 在 body 中添加多个 span 元素，每个 span 元素的颜色为 #faebd7。
5. 使用 animation 属性将 shadow 动画应用到每个 span 元素上，并设置动画时间为 1.5s，动画类型为线性，动画无限循环，并在每个 span 元素上设置不同的动画延迟时间，以实现文字阴影的连续效果。

全部的样式

@keyframes shadow {
  to {
    color: #ff0266;
    text-shadow: 20px 0 70px 0ff0266;
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-content: center;
  background: #1e1f25;
  height: 100vh;
  font-size: 66px;
  font-weight: bold;
}

span {
  color: #faebd7;
  animation: shadow 1.5s linear infinite alternate;
}

span:nth-child(n + 2) {
  animation-delay: 0.2s;
}

span:nth-child(n + 3) {
  animation-delay: 0.4s;
}

span:nth-child(n + 4) {
  animation-delay: 0.6s;
}
span:nth-child(n + 5) {
  animation-delay: 0.8s;
}
span:nth-child(n + 6) {
  animation-delay: 1s;
}

布局结构

<div class="text-area">
  <span>Fspan>
  <span>Ospan>
  <span>Lspan>
  <span>Lspan>
  <span>Ospan>
  <span>Wspan>
  <span>Mspan>
  <span>Espan>
div>