CSS3实现⽂字流光渐变特效
制作流光⽂字有⼏个要点：text-fill-color⼀般设置为transparent（透明⾊），然后利⽤background-image和渐变颜⾊来设置⽂字的背景⾊，利⽤background-clip来实现⽂字的截取，再利⽤background-size设置扩⼤背景，已使运⽤animation的时候能达到动画的效果等。
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>Title
</
title
>
css特效文字<
style
>
._borderWrap{
width:
180px;
height:
150px;
position:
absolute;
left:
23%;
top:
25%;
}
._border{
line-height:
145px;
text-align:
center;
font-size:
40px;
font-weight:
bolder;
-webkit-text-fill-color:
transparent; background-image:
-webkit-linear-gradient( left,
#129835,
#ece648
25%,
#129835
50%,
#F9E92B
75%,
rgb(
40,
150,
38));
background-size:
200%,
100%;
-webkit-background-clip: text;
-
webkit-animation: word  5s
linear
infinite ;
}
@keyframes
word {
0%{
background-position:  0
0}
100%{ background-position:  -100%
0}
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"_borderWrap"
>
<
div
class=
"_border"
>流光字体
</
div
>
</
div
>
</
body
>
</
html
>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。