演示效果

代碼如下

<div class="wrap">    閑看兒童捉柳花</div>

CSS部分:
@keyframes move {
      0% {background-position: 0 0;}
      100% {
        /*寬度固定，如果為百分比背景不會滾動*/
        background-position: -300px 0;
      }
}    
.wrap {
/*設置背景漸變色*/
  background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);      
  /*chrome私有樣式，加前綴，文字顯示背景圖片*/
  -webkit-background-clip: text;      
  animation: move 5s infinite;      
  /*文字顏色設為透明*/
  color: transparent;      
  /*寬度固定*/
  width: 300px;
}

轉載請注明出處 AE博客|墨淵 ? 動態漸變彩色文字代碼