您的当前位置：首页正文

css3文字渐变动画

2020-11-27 来源：星星旅游

这次给大家带来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, #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>
<p class="masked" >
 <h1>→css3文字渐变动画效果 >></h1>
</p>

说明：

-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%; }
 }
<p class="slideShine" >→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 .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%) ;}
}
<p class="text" style="margin: 150px auto;">
 <img src="img/text.png" />
 <p class="mask"><i></i></p> 
</p>

效果：

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 .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%) ;}
}
<p class="text2" style="margin: 150px auto;">
 <img src="img/text3.png" />
 <p class="mask"><i></i></p> 
</p>

效果：

因为单纯用第一、二种方法实现不了多种文字的颜色，他都会被<' text-fill-color '>定义的颜色覆盖，所以如果设置文字多种颜色的话，我就用图片来代替了，不过可以看出，用遮罩来实现文字渐变彩虹的效果不佳-^-

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！