1 <body>
2 <style>
3 span {
4 /* background:linear-gradient(to right,rgb(119, 149, 173),rgb(148, 139, 139)); */
5 color: gray;
6 position: relative;
7 font-size: 16px;
8 }
9 span::before {
10 content:attr(text);
11 display: inline-block;
12 position: absolute;
13 top: 0;
14 /* width: 100%; */
15 /* height: 100%; */
16 background: linear-gradient(to right, red, red) no-repeat 0 0;
17 background-size: 0% 100%;
18 -webkit-background-clip: text;
19 background-clip: text;
20 color: transparent;
21 animation: gc linear 13s infinite;
22 }
23 @keyframes gc {
24 0% {
25 background-size: 0% 100%;
26 }
27 100% {
28 background-size: 100% 100%;
29 }
30 }
31 </style>
32 <span text="两只老虎，两只老虎，跑得快，跑得快，一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！">两只老虎，两只老虎，跑得快，跑得快，一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！</span>
33 </body>