CSS3 文字渐变动画

背景剪裁

语法：background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是: -webkit-background-clip:text;（谷歌浏览器）

示例：从局部到全局渐变

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>文字渐变动画</title>

   <style>

 .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%; }

  }

 </style>

 </head>

 <body>

 <p class="slideShine" >→css3文字渐变动画效果 >></p>

 </body>

 </html>

效果图：

CSS3 文字渐变动画

这是一个动态的图片，截屏如上图所示。

说明：

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

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

希望有所帮助！！！

秒客网

CSS3 文字渐变动画

相关文章