CSS3实现文字流光渐变特效

最新推荐文章于 2025-08-05 10:03:20 发布

原创最新推荐文章于 2025-08-05 10:03:20 发布 · 7.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #文字渐变 #流光字 #特效

HTML 同时被 2 个专栏收录

49 篇文章

订阅专栏

CSS

19 篇文章

订阅专栏

本文介绍如何使用CSS实现流光文字效果，通过设置text-fill-color为transparent并利用background-image定义渐变背景，配合background-clip和animation实现动态流光效果。

制作流光文字有几个要点：text-fill-color一般设置为transparent（透明色），然后利用background-image和渐变颜色来设置文字的背景色，利用background-clip来实现文字的截取，再利用background-size设置扩大背景，已使运用animation的时候能达到动画的效果等。

<!DOCTYPE html>
<html 
lang="en">
<head>
<meta 
charset="UTF-8">
<title>Title</title>
<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,#ece64825%,#12983550%,#F9E92B75%,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>