使用css3怎么实现一个文字扫光渐变动画效果
使用css3怎么实现一个文字扫光渐变动画效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联专注于企业网络营销推广、网站重做改版、丹棱网站定制设计、自适应品牌网站建设、html5、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为丹棱等各大城市提供网站开发制作服务。
利用css3这个属性（背景剪裁）：
background-clip: border-box || padding-box || context-box || no-clip || text
本次用到的就是: -webkit-background-clip:text;
栗子：
1、
→css3文字渐变动画效果 >>
说明：
-webkit-text-fill-color: transparent;(这里必须填充透明颜色，这样渐变的颜色才会填充到文字上面，去掉这个或者填充别的颜色，效果不明显)
检索或设置对象中的文字填充颜色，若同时设置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性；
效果：
2、跟第一个栗子差不多，多给了一个背景颜色，从局部到全局渐变
.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%; }
}
→css3文字渐变动画效果 >>效果：
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 .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%) ;}
}
