字体流光效果
html部分1
2
3<div class="demo">
<h1>具有流光效果的一段文字！</h1>
</div>
css部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.demo {
width: 400px;
text-align: center;
background-image: -webkit-linear-gradient(left, green, purple 25%, green 50%, purple 75%, green);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 3s infinite linear;
}
h1 {
width: 100%;
height: 100%;
}
@-webkit-keyframes masked-animation {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}