背景剪裁

语法：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. AIX弱口令解密

    1.看下我们的AIX弱口令如果是图中的这种那么我们就可以通过以下脚本来完成转换 2.打开kali给脚本丢进去自动生成下图这种格式,转换完成后保存通过john --w来跑. 脚本文件:保存为.bash ...

  2. mysql 错误号码1129

    SQLyog连接mysql 错误号码1129: mysql error 1129: Host 'bio.chip.org' is blocked because of many connection ...

  3. python中argparse模块简单使用

    python中argparse模块简单使用 简介 argparse是python用于解析命令行参数和选项的标准模块.argparse模块的作用是用于解析命令行参数. 使用步骤 1.首先导入该模块 2. ...

  4. C++练习 | 单向链表类模板（包含类模板中静态变量初始化格式）

    #include <iostream> #include <string> using namespace std; template <class T> clas ...

  5. Git 实习一个月恍然大悟合集

    从开始实习到现在大概有一个月了,这个月时间接触了很多新东西,其中就包括了git版本控制.分支管理等等.我在这段时间里,深深地感受到了git对公司项目代码管理和控制.团队合作带来的益处和其重要性.其实在 ...

  6. java-阿里云发送短信

    <!--aliyun短信sdk--> <dependency> <groupId>com.aliyun</groupId> <artifactId ...

  7. # 关于设置AUTH_USER_MODEL出现的问题

    关于设置AUTH_USER_MODEL出现的问题 在运行的时候出现了一个bug: AttributeError: type object 'UserProfile' has no attribute ...

  8. USB fuzzing

    简介 最近看一些USB fuzzing方面的东西,总结一下.主要是软件方面的工作. vUSBf 文章在这里:https://www.blackhat.com/docs/eu-14/materials/ ...

  9. CSS3彩色进度条加载动画 带进度百分比

    在线演示       本地下载

  10. Nginx负载均衡调度算法

    Nginx支持的负载均衡调度算法方式如下: 1. weight轮询(默认) 接收到的请求按照顺序逐一分配到不同的后端服务器,即使在使用过程中,某一台后端服务器宕机,nginx会自动将该服务器剔除出队列 ...