css3文字扫光渐变色

秒速五厘米 2024-02-18 21:16 63阅读 0赞

## [css3实现文字扫光渐变动画效果][css3] ##

利用css3这个属性（背景剪裁）：

background-clip: border-box || padding-box || context-box || no-clip || text
    
    本次用到的就是:  -webkit-background-clip:text;

栗子：

1、

![复制代码][copycode.gif]

![复制代码][copycode.gif]

说明：

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

**检索或设置对象中的文字填充颜色，**

*  若同时设置 <' text-fill-color '> 和 <' [color][] '>，<' text-fill-color '> 定义的颜色将覆盖 <' [color][] '> 属性；
 *  效果：

![721743-20160531141601836-1099052095.gif][]

2、跟第一个栗子差不多，多给了一个背景颜色，从局部到全局渐变

![复制代码][copycode.gif]

.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>

![复制代码][copycode.gif]

效果：

![721743-20160531142026133-2117651037.gif][]

3、用webkit遮罩来实现文字渐变动画

![复制代码][copycode.gif]

.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>

![复制代码][copycode.gif]

效果：

![721743-20160531142304321-2061289341.gif][]

4、实现多颜色文字的渐变

![复制代码][copycode.gif]

.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>

![复制代码][copycode.gif]

效果：

![721743-20160531142529305-177215806.gif][]

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

[css3]: https://www.cnblogs.com/U-can/p/5545761.html
[copycode.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/849b0b416b8c4dd5b240dd6eb7260641.png
[color]: http://www.css88.com/book/css/properties/color/color.htm
[721743-20160531141601836-1099052095.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3bd88b992e7b4dfdb525a564ccb9bf58.png
[721743-20160531142026133-2117651037.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9e4eb39d8b38408ebac02de35355af8b.png
[721743-20160531142304321-2061289341.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0127eb71409f442a875e2fced24eb3be.png
[721743-20160531142529305-177215806.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cf6a36a02d2543a4a17b3798b82f8ae1.png