css3完成文本扫光渐变色动漫实际效果的示例

日期:2021-03-02 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

本篇文章内容关键详细介绍了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: ⑴00% 0;}
    }
</style>
<div class="masked" >
        <h1>→css3文本渐变色动漫实际效果 >></h1>
</div>

表明:

-webkit-text-fill-color: transparent;(这里务必填充全透明色调,这样渐变色的色调才会填充到文本上面,去掉这个或填充其他色调,实际效果不显著)

查找或设定目标中的文本填充色调,若另外设定 <' text-fill-color '> 和 <' color '>,<' text-fill-color '> 界定的色调将遮盖 <' color '> 特性;

实际效果:

2、跟第1个栗子类似,多给了1个情况色调,从部分到全局性渐变色

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

实际效果:

由于单纯性用第1、2种方式完成不上多种多样文本的色调,他都会被<' text-fill-color '>界定的色调遮盖,因此假如设定文本多种多样色调的话,我就用照片来替代了,但是能够看出,用遮罩来完成文本渐变色彩虹的实际效果不佳-^-

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS 纪录客户登陆密码的方式 返回下一篇:没有了