利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)


Posted in HTML / CSS onJune 15, 2017

本文介绍的利用纯CSS3实现文字向右循环闪过效果的相关资料,下面话不多说,大家先来看看示例代码吧。

示例代码:

<!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实现文字向右循环闪过效果实例(可用于移动端)

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

利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)

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

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

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

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

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

最后,说一下思路:

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

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

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

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
很可爱的输入框
2008/08/03 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python 多线程Threading初学教程
2017/08/22 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python json读写方式和字典相互转化
2020/04/18 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
某某同志考察材料
2014/05/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2015年女生节活动总结
2015/02/27 职场文书
八年级作文之友谊
2019/12/02 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
详解MindSpore自定义模型损失函数
2021/06/30 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python3的进程和线程你了解吗
2022/03/16 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js