背景剪裁

语法：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>

效果图：

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

说明：

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

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

     希望有所帮助！！！

CSS3 文字渐变动画的更多相关文章

  1. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  2. css3文字渐变无效果的解决方案

    现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码: .title { font-size: 60px; line-height: 80px; text ...

  3. Css3 文字渐变整理（一）

    一.文本颜色渐变 <gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像. 语法:<gradient> = li ...

  4. 纯CSS3浮雕质感的立体文字旋转动画

    还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...

  5. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  6. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  7. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  8. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  9. 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. Net 文件和流 I/O

    文件和流 I/O 2017/03/30 文件和流 I/O(输入/输出)是指在存储媒介中传入或传出数据. 在 .NET Framework 中,System.IO 命名空间包含允许以异步方式和同步方式对 ...

  2. c++ 读入优化通用模板

    struct ioss { #define endl '\n' ; char obuf[LEN], *oh = obuf; std::streambuf *fb; ioss() { ios::sync ...

  3. SSH框架aop的切面表达式

    一:概述 众所周知,Spring是一个轻量级的.非侵入式的.独立于各种应用服务器的开源框架.它的两大方面被人们所熟知,也应用很广.那就是IOC(控制反转)和AOP(面向方面编程). IOC是开发者不创 ...

  4. // TODO Auto-generated method stub 作用及设置

    当我们创建一个主方法类时,eclipse会默认插入一条注释语句: // TODO Auto-generated method stub 作用: // TODO Auto-generated metho ...

  5. jdbc简单使用

    1.代码 import java.sql.*; public class DBUtil { public static void main(String[] args) throws ClassNot ...

  6. 数据库索引 B+树

    问题1.数据库为什么要设计索引?索引类似书本目录,用于提升数据库查找速度.问题2.哈希(hash)比树(tree)更快,索引结构为什么要设计成树型?加快查找速度的数据结构,常见的有两类:(1)哈希,例 ...

  7. linux_文本编译使用命令

    一:字符模式与shell命令 字符界面和图形界面 字符界面优点: 1):系统执行效率高,稳定性高,执行结果可直接返回 2):节省系统资源,对一个服务器至关重要 3):节省大量网络开销,大幅降低运行成本 ...

  8. Java回调实现异步

    在正常的业务中使用同步线程,如果服务器每处理一个请求,就创建一个线程的话,会对服务器的资源造成浪费.因为这些线程可能会浪费时间在等待网络传输,等待数据库连接等其他事情上,真正处理业务逻辑的时间很短很短 ...

  9. win10子系统Ubuntu重置

    重置: 在win10命令行下执行: lxrun /uninstall /full 安装: win+R打开bash 执行命令: lxrun /install /y

  10. Git提交代码的小知识

    1.需要切换到项目目录下并创建一个Repository用于提交代码到这个仓库里 cd /g/....//cd后面有空格,用于进入某个项目文件夹 git init//用于创建Repository 2.添 ...