使用css3怎么实现一个文字扫光渐变动画效果

使用css3怎么实现一个文字扫光渐变动画效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

利用css3这个属性（背景剪裁）：

background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是: -webkit-background-clip:text;

栗子：

1、

<style>
.masked{
text-align:center;
background-image:-webkit-linear-gradient(left,#147B96,#E6D20525%,#147B9650%,#E6D20575%,#147B96);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-background-size:200%100%;
-webkit-animation:masked-animation4sinfinitelinear;
}
@-webkit-keyframesmasked-animation{
0%{background-position:00;}
100%{background-position:-100%0;}
}
</style>
<divclass="masked">
<h2>&rarr;css3文字渐变动画效果>></h2>
</div>

说明：

-webkit-text-fill-color: transparent;(这里必须填充透明颜色，这样渐变的颜色才会填充到文字上面，去掉这个或者填充别的颜色，效果不明显)

检索或设置对象中的文字填充颜色，若同时设置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性；

效果：

2、跟第一个栗子差不多，多给了一个背景颜色，从局部到全局渐变

.slideShine{
background:#871317-webkit-linear-gradient(left,#561214,#febaf750%,#ff090%,#561214)no-repeat00;
background-size:20%100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size:36px;
text-align:center;
font-weight:bold;
text-decoration:underline;
}
.slideShine{-webkit-animation:slideShine4slinearinfinite;animation:slideShine4slinearinfinite;}
@-webkit-keyframesslideShine{
0%{
background-position:00;
}
100%{
background-position:100%100%;
}
}
@keyframesslideShine{
0%{background-position:00;}
100%{background-position:100%100%;}
}
<pclass="slideShine">&rarr;css3文字渐变动画效果>></p>

效果：

3、用webkit遮罩来实现文字渐变动画

.text{position:relative;width:57%;max-width:531px;}
.text.mask{position:absolute;width:100%;height:95%;top:0;left:0;-webkit-mask-image:url(img/text.png);}
.text.maski{position:absolute;height:100%;width:20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf750%,#ff090%,#561214)no-repeat00;animation:lightLine14slinearinfinite;-webkit-animation:lightLine14slinearinfinite;background-size:100%100%;}
@keyframeslightLine1{
0%{transform:translateX(0);}
100%{transform:translateX(500%);}
}
@-webkit-keyframeslightLine1{
0%{-webkit-transform:translateX(0);}
100%{-webkit-transform:translateX(500%);}
}
<divclass="text"style="margin:150pxauto;">
<imgsrc="img/text.png"/>
<divclass="mask"><i></i></div>
</div>

效果：

4、实现多颜色文字的渐变

.text2{position:relative;width:63%;max-width:586px;}
.text2.mask{position:absolute;width:100%;height:95%;top:0;left:1px;-webkit-mask-image:url(img/text3.png);}
.text2.maski{position:absolute;height:100%;width:20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf750%,#ff090%,#561214)no-repeat00;animation:lightLine24slinearinfinite;-webkit-animation:lightLine24slinearinfinite;background-size:100%100%;}
@keyframeslightLine2{
0%{transform:translateX(0);}
100%{transform:translateX(420%);}
}
@-webkit-keyframeslightLine2{
0%{-webkit-transform:translateX(0);}
100%{-webkit-transform:translateX(420%);}
}
<divclass="text2"style="margin:150pxauto;">
<imgsrc="img/text3.png"/>
<divclass="mask"><i></i></div>
</div>

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。