本篇文章主要介紹了css3實(shí)現(xiàn)文字掃光漸變動(dòng)畫效果的示例，分享給大家，具體如下：
利用css3這個(gè)屬性（背景剪裁）：
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, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s infinite linear;
}
@-webkit-keyframes masked-animation {
0%{ background-position: 0 0;}
100% { background-position: -100% 0;}
}
</style>
<div class="masked" >
<h1>→css3文字漸變動(dòng)畫效果 >></h1>
</div>
說(shuō)明：
-webkit-text-fill-color: transparent;(這里必須填充透明顏色，這樣漸變的顏色才會(huì)填充到文字上面，去掉這個(gè)或者填充別的顏色，效果不明顯)
檢索或設(shè)置對(duì)象中的文字填充顏色，若同時(shí)設(shè)置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定義的顏色將覆蓋 <' color '> 屬性；
效果：
2、跟第一個(gè)栗子差不多，多給了一個(gè)背景顏色，從局部到全局漸變
.slideShine{
background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;
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: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}
@-webkit-keyframes slideShine {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@keyframes slideShine {
0% {background-position: 0 0; }
100% {background-position: 100% 100%; }
}
<p class="slideShine" >→css3文字漸變動(dòng)畫效果 >></p>
效果：
3、用webkit遮罩來(lái)實(shí)現(xiàn)文字漸變動(dòng)畫
.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 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine1{
0%{transform:translateX(0) ;}
100%{transform:translateX(500%);}
}
@-webkit-keyframes lightLine1{
0%{-webkit-transform:translateX(0) ;}
100%{-webkit-transform:translateX(500%) ;}
}
<div class="text" style="margin: 150px auto;">
<img src="img/text.png" />
<div class="mask"><i></i></div>
</div>
效果：
4、實(shí)現(xiàn)多顏色文字的漸變
.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 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine2 4s linear infinite;-webkit-animation: lightLine2 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine2{
0%{transform:translateX(0) ;}
100%{transform:translateX(420%);}
}
@-webkit-keyframes lightLine2{
0%{-webkit-transform:translateX(0) ;}
100%{-webkit-transform:translateX(420%) ;}
}
<div class="text2" style="margin: 150px auto;">
<img src="img/text3.png" />
<div class="mask"><i></i></div>
</div>
效果：
因?yàn)閱渭冇玫谝弧⒍N方法實(shí)現(xiàn)不了多種文字的顏色，他都會(huì)被<' text-fill-color '>定義的顏色覆蓋，所以如果設(shè)置文字多種顏色的話，我就用圖片來(lái)代替了，不過(guò)可以看出，用遮罩來(lái)實(shí)現(xiàn)文字漸變彩虹的效果不佳-^-
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。