<!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. 原生态JS实现banner图的常用所有功能

    虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...

  2. jquery-ul-li实现分页功能 转载仅供交流

    js文件代码: (function($){ $.fn.Pages = function(options){ var opts = $.extend({},$.fn.Pages.defaults, op ...

  3. JAVA----类的继承1(extends)

    要学习类的继承,首先应当理解继承的含义: 来自新华词典的释义: ①依法承受(死者的遗产等):-权ㄧ-人. ②泛指把前人的作风.文化.知识等接受过来:-优良传统ㄧ-文化遗产. ③后人继续做前人遗留下来的 ...

  4. SAP RFC函数远程调试跟踪管理软件

    最近在搞OA系统与sap的接口开发,接口太多老是和.net的开发人员打嘴仗,为了避免不必要的纠结,自己做了一个rfc的调试工具,有些问题调试起来也比较容易了.程序是delphi开发的,为了保证程序可以 ...

  5. mybatis插入List集合数据

    处女帖 今天做完一个定时任务将一个表中的数据每天统计到另外一个表中,开始是用循环的方式向数据库添加,觉得数据库可能访问压力过大,所以就使用了mybatis的foreach标签来稍微的减少压力. 首先封 ...

  6. Linux Shell——流程控制

    1. 创建交互式脚本 使用 echo命令的选项 关于各种命令的使用,可以使用man 命令来查看命令的详细用法介绍.例如,我想看下 echo 的用法和各种选项.可以执行 man echo.执行结果如下: ...

  7. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  8. 生产环境中使用Docker Swarm的一些建议

    译者按: 实践中会发现,生产环境中使用单个Docker节点是远远不够的,搭建Docker集群势在必行.然而,面对Kubernetes, Mesos以及Swarm等众多容器集群系统,我们该如何选择呢?它 ...

  9. 使用java API操作hdfs--通过filesystem API 来读取数据

    上面的Path的包是导入错误了,nio中的包是抽象类,是无法创建的,所以换地方更改. 修改之后,指定jar包之后,编译成功,如下,并进行文件的读取操作,依然是成功啦:

  10. C# 文件上传(可以多文件上传)

    一.前端搭建 1.前端用到js:uploadify(下载地址:http://www.uploadify.com/download/).layer (下载地址:http://layer.layui.co ...