欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3实现文字扫光渐变动画效果的示例

程序员文章站 2023-11-24 12:14:28
这篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 17-11-07...

本篇文章主要介绍了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>
<div class="masked" >
        <h1>→css3文字渐变动画效果 >></h1>
</div>

说明:

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

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

效果:

css3实现文字扫光渐变动画效果的示例

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> 

效果:

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

效果:

css3实现文字扫光渐变动画效果的示例

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

效果:

css3实现文字扫光渐变动画效果的示例

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。