<!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <style>

             .shadow {

                 text-align: center;

                 /* 背景颜色线性渐变 */

                     /* 老式写法 */

                         /* linear为线性渐变，也可以用下面的那种写法。left top，right top指的是渐变方向，左上到右上 */

                         /* color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。所以本次渐变为两边灰色，中间渐白色 */

                 background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));

                     /* 新式写法 */

                 /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */

                 /* 设置为text，意思是把文本内容之外的背景给裁剪掉 */

                 -webkit-background-clip: text;

                 /* 设置对象中的文字填充颜色 这里设置为透明 */

                 -webkit-text-fill-color: transparent;

                 /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */

                 -webkit-animation: animate 1.5s infinite;

             }

             /* 兼容写法，要放在@keyframes前面 */

             @-webkit-keyframes animate {

                 /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */

                 from {background-position: -100px;}

                 to {background-position: 100px;}

             }

             @keyframes animate {

                 from {background-position: -100px;}

                 to {background-position: 100px;}

             }

         </style>

     </head>

     <body>

         <div class="shadow">文字向右闪过效果</div>

     </body>

 </html>

一、直接上代码！下面这是效果图：

二、这个白色渐变闪过效果用CSS3做很容易也很方便，唯一不好的地方应该就是兼容问题了。所以现在一般都用在移动端上面了。

三、来啦来啦！(敲黑板) 我觉得代码注释已经比较清楚了，所以画画重点就好了！！！

1、infinite                                           这是循环执行的属性，有了它，才能一闪一闪滴！

2、-webkit-text-fill-color: transparent;    文字填充颜色为透明，没有设置的话，看不出白色渐变划过效果的！

3、-webkit-background-clip: text;          把文本内容之外的背景给裁剪掉，如果不加，文字显示不出来，只显示渐变的颜色！

4、color-stop() 渐变的color-stop              函数，表示渐变的位置和颜色，就是它，我们才能想在哪里渐变就哪里渐变，再让它移动起来，就出现一闪一闪的效果了！

四、最后，说一下思路：

　　首先，设置一个中间白色、两边灰色的渐变背景色；

　　其次，文字填充颜色设为透明(才能看到白色背景)；

　　接着，把文字之外的背景色给裁剪掉(只显示文字)；

　　最后，用@keyframes，让背景白色位置循环从左到右执行。

如果还有任何问题，欢迎留言哈！！！

纯CSS3向右循环闪过效果的更多相关文章

  1. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  4. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5 纯CSS3实现div按照顺序出入效果

    效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 纯CSS3实现蜡烛（冒烟）效果

    1. 闲来无事时在网上看一些前辈的博客文章,自己尝试了一下.学习到最重要的一点就是box-shadow的叠加使用,受益非线.先上一下效果图: 其中有以下重要的几点: 1. 蜡烛底座的border-ra ...

  7. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

  8. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  9. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

随机推荐

  1. javascript继承详解（待续）

    常见继承分两种,一种接口继承,继承方法签名:一种实现继承,继承实际方法.js只支持后一种. 1原型链 首先看原型.构造函数.实例的关系.如果我们让一个函数的原型对象等于另一个的实例,然后另一个的原型对 ...

  2. 500. Keyboard Row

    Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...

  3. 跨语言学习的基本思路及python的基础学习

    笔者是C#出身,大学四年主修C#,工作三年也是C#语言开发.但在学校里其他的语言也有相应的课程,eg:Java,Php,C++都学过,当然只是学了皮毛(大学嘛,你懂得),严格来说未必入门,但这些语言的 ...

  4. python数据处理——numpy_2

    上一次的学习了numpy的一些基础操作,今天接着学习numpy的高级索引.轴对换数值转置以及作图. #花式索引 import numpy as np ''' t = np.empty((8,4)) # ...

  5. 《Effective C#》读书笔记-1.C# 语言习惯-1.使用属性而不是可访问的数据成员

    思维导图: 大纲: 1.使用属性而不是可访问的数据成员    属性        指定不同的访问权限        隐式属性降低了声明属性的工作量        允许将数据成员作为公共接口的一部分暴露 ...

  6. AIX误删除LV后如何进行现场保护和数据恢复工作

    在AIX环境下,若因维护误操作.存储mapping错误等,不小心将LV误删除,这种损失通常是巨大的.删除后的不当保护及恢复操作可能使数据无法恢复,也可能增加处理的时间与算法复杂度.如何有效保护现场,并 ...

  7. Java中双向链表的代码实现

    写在前面: 双向链表是一种对称结构,它克服了单链表上指针单向性的缺点,其中每一个节点即可向前引用,也可向后引用,这样可以更方便的插入.删除数据元素. 由于双向链表需要同时维护两个方向的指针,因此添加节 ...

  8. 在myeclipse下安装svn插件，出现了Could not generate DH keypair，这么一个错误。

    解决方法: window-->preferences-->Team-->SVN-->SVN接口 选择:JavaHL 去https://sliksvn.com/download/ ...

  9. django restframework serializer 增加自定义字段

    在使用django restframework serializer 序列化在django中定义的model时,有时候我们需要额外在serializer中增加一些model中没有的字段.有两种方法实现 ...

  10. MarkDown本地图片上传工具制作总结

    引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...