CSS实现 渐变色文字 循环动画

<style>
    .section-subTitle{
      font-size: 60px;
      font-weight: bold;
      text-align: center;
    }

    @-webkit-keyframes dancingColors {
      50% {
        background-position: -860px;
      }
    }

    @keyframes dancingColors {
      50% {
        background-position: -860px;
      }
    }

    .gradient-text {
      transition: all 5s ease;
      background: -o-linear-gradient(left, #2A9CF5, #6BDEF5, #A5D060, #00BA90, #2A9CF5);
      background: -webkit-linear-gradient(left, #2A9CF5, #6BDEF5, #A5D060, #00BA90, #2A9CF5);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-animation: dancingColors 5s infinite forwards ease-in-out;
      animation: dancingColors 5s infinite forwards ease-in-out;
    }
  </style>

<p class="section-subTitle gradient-text">
  CSS实现<br>渐变色文字循环动画
</p>

 

posted @ 2022-04-28 17:01  fwxin  阅读(351)  评论(0编辑  收藏  举报