背景剪裁

语法：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. Linux 磁盘卷扩容

    首先识别磁盘,成功之后会显示在/dev下 [root@oracle01 ~]# fdisk /dev/sda ## /dev/sda为通过fdisk -l 查看到的物理磁盘(第一行) Welcome ...

  2. python学习笔记四 （运算符重载和命名空间、类）

    从以上代码中应该了解到: obj.attribute  查找的顺序: 从对象,类组成的树中,从下到上,从左到右到查找最近到attribute属性值,因为rec中存在name的属性,所以x.name可以 ...

  3. 什么是数据传输服务DTS

    数据传输服务(Data Transmission Service) DTS支持关系型数据库.NoSQL.大数据(OLAP)等数据源间的数据传输. 它是一种集数据迁移.数据订阅及数据实时同步于一体的数据 ...

  4. axios模块封装和分类列表实现

    这个作用 主要还是为了让代码更加的,清晰. 不要全部都放到  created(){}  这个方法下面.把这些代码全部抽离出去. 这里就只是去调用方法.1. src 目录下,新建文件夹---  rest ...

  5. ASP.NET Core中使用Autofac进行属性注入

    一些无关紧要的废话: 作为一名双修程序员(自封的),喜欢那种使用Spring的注解形式进行依赖注入或者Unity的特性形式进行依赖注入,当然,形式大同小异,但结果都是一样的,通过属性进行依赖注入. A ...

  6. Go语言流程控制（六）

    go语言的流程控制主要有if , for和switch. if else(分支结构) go语言的if判断: func main() { score:=65 if score>=90{ fmt.P ...

  7. ＭySQL日期时间函数大全

    1.获取当前时间+日期 函数now() mysql> select now(); +---------------------+ | now() | +--------------------- ...

  8. # vmware异常关机后，虚拟系统无法启动的解决办法

    vmware异常关机后,虚拟系统无法启动的解决办法 先使用everything搜索所有后缀为.lck的文件,这些文件全部删除,如果不确定是否可以删除,先把这些文件转移到桌面,等能启动虚拟系统之后再删除 ...

  9. 2019-2020Nowcoder Girl初赛题解

    写了一天计算几何,心态崩了,水一篇题解休息休息. emmmm,如果您是一名现役OIer/CSPer,那看这篇文章也许并不能在你的生命中留下些什么(潮子语录),因为相比NOIP/CSP这个比赛其实比较简 ...

  10. Java加密数据库

    一.背景 数据库配置以明文方式展示如图,会造成安全隐患,如果有黑客入侵会造成密码泄露,信息窃取和破坏等. 二.加密步骤 1.对数据库信息加密: 对数据库中的账号和密码信息进行加密(选择一种算法)然后替 ...