css 文字光影特效

本文介绍: css 文字光影特效。

 <style&gt;
      .text-area{
          text-align: center;
      }
      span{
          font-weight: bold;
          font-size:70px;
          color:#faebd7;
          animation:shadowing 1s ease-in-out 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.4s;
      }
      span:nth-child(n+5){
          animation-delay: 0.5s;
      }
      span:nth-child(n+6){
          animation-delay: 0.6s;
      }
      span:nth-child(n+7){
          animation-delay: 0.7s;
      }
      span:nth-child(n+8){
          animation-delay: 0.8s;
      }
      span:nth-child(n+9){
          animation-delay: 0.9s;
      }
      @keyframes shadowing {
          to{
              color:#ff020f;
              text-shadow: 20px 0 70px #ff020f;
          }

      }
  </style&gt;

<div class="text-area"&gt;
      <span&gt;加</span&gt;
      <span&gt;加</span&gt;
      <span>加</span>
      <span>加</span>
      <span>油</span>
      <span>未</span>
      <span>来</span>
      <span>可</span>
      <span>期</span>
 </div>