CSS动态渐变彩色文字代码

演示效果

在这段代码添加上去就可以看到效果
https://jsbin.com/?html,css,output

代码：

1
<div class="wrap"> 五星红旗迎风飘扬</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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;

}