55.css-文字连续光影

今天介绍一个文字的连续光影的特效,开始以为挺难得,结果发现还css很简单

准备容器与文字

  <div>
    <span>文</span>
    <span>字</span>
    <span>光</span>
    <span>影</span>
    <span>特</span>
    <span>效</span>
  </div>
  
      div {
      background-color: #000;
    }

    span {
      color: #faebd7;
      animation: shadow 1s ease-in-out infinite alternate;
    }

添加动画

• shadow:动画名称
• 1s:动画时间
• ease-in-out: 动画以低速开始和结束
• infinite:一直循环动画
• alternate:轮流反向播放动画

    @keyframes shadow {
      to {
        color: #ff0266;
        text-shadow: 20px 0 70px #ff0266;
      }
    }
        span {
      color: #faebd7;
      animation: shadow 1s ease-in-out infinite alternate;
    }

设置延时

• animation-delay:延时时间

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

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

    span:nth-child(4) {
      animation-delay: 0.6s;
    }

    span:nth-child(5) {
      animation-delay: 0.6s;
    }

    span:nth-child(6) {
      animation-delay: 0.8s;
    }

    span:nth-child(7) {
      animation-delay: 1s;
    }