背景剪裁

语法：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. apache 设置允许跨域

    1.首先找到 httpd.conf 文件 找到   #LoadModule headers_module modules/mod_headers.so 把#注释符去掉(也有可能已经默认去掉了) 目的是 ...

  2. 牛客小白月赛12-C（欧拉筛解积性方程）

    题目链接:https://ac.nowcoder.com/acm/contest/392/C 题意:给定n,求: 思路:令res[i]=iN  (%MOD),因为xn是一个积性函数,即(x*y)n=x ...

  3. 最长相同01数的子串（map搞搞）--牛客第三场 -- Crazy Binary String

    题意: 如题. 或者用我的数组分治也可以,就是有点愚蠢. //#include <bits/stdc++.h> #include <map> #include <iost ...

  4. Django进阶(一)

    目录 choice参数 MTV与MVC模型 Ajax Ajax传json数据 Ajax传file数据 contentType前后端传输数据编码 ajax + sweetalert 序列化组件 补充 c ...

  5. nginx+gunicorn/uwsgi+python web 的前世今生

    我们在部署 flask.django 等 python web 框架时,网上最多的教程就是 nginx+gunicorn/uwsgi 的部署方式,那为什么要这么部署呢,本文就来系统地解释这个问题. 必 ...

  6. docker-文件系统出错处理

    Error response from daemon: error creating overlay mount to /var/lib/docker/overlay2 2018年03月17日 22: ...

  7. 只读字段（readonly）和常量（const）

    1.常量 一个包含不能修改的值的变量,通过const关键字定义.只能在声明的同时赋值 2.只读字段 通过readonly关键字定义. 可以在声明的同时赋值. 对于实例字段,在包含字段声明的类的实例构造 ...

  8. JSP和JSTL视图解析器

    使用JSTL users.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  9. SAP模块一句话入门(专业术语的理解)

    SAP模块一句话入门(专业术语的理解) SAP一句话入门:Financial & Controlling Accounting (FICO) 财务,财务,呵呵,让我们关心一下给我发工资的部门. ...

  10. Visual Studio (VC) Win32 程序由于数据大，内存溢出怎么办？

    Visual Studio (VC) 内编写的Win32 程序由于数据大,内存溢出,即使转移到64位系统也不行.在国外网站上找到了答案. 原来,只需在project->property中的Lin ...