CSS文字的跑马灯特效
上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心!
今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春!
道具:会敲代码的巧手、七窍玲珑心、会辩色的睿智双眼
原理:文字底部放张背景图,文字color设为透明(color:tranparent;),设置渐变色背景图(
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
),设置背景的绘制区域为text(-webkit-background-clip:text;),然后使用动画不停移动背景图
bingo!!!!
效果图
代码
<html>
<head>
<meta charset="UTF-8">
<!--<script>less.watch();</script>-->
<style>
.title {
display: block;
text-decoration: none;
text-align: center;
line-height: 1.5;
margin: 20px 0px;
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color: transparent;
-webkit-background-clip: text;
background-size: 200% 100%;
-webkit-animation: slide 2s infinite linear;
animation: slide 5s infinite linear;
font-size: 40px;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>
</head>
<body>
<p class="title">
为了引起你的注意,我真是煞费苦心
</p>
</body>
</html>
CSS文字的跑马灯特效的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- 使用 JS 实现文字左右跑马灯
Ø 前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1. 首先定义 ...
- Androidd Studio 之多行文字跑马灯特效
•效果展示图 •参考资料 两种方法实现TextView跑马灯效果(字体横向滚动) •出现的问题 新建 Java 文件继承 TextView 时出现问题: •解决方法 不应该继承 $TextView$ ...
- Unity3D 文字滚动跑马灯效果
需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...
- 使用 JS 实现文字上下跑马灯
Ø 前言 今天在做商城首页时,遇到一个上下跑马灯功能,因为之前也只是接触过左右的跑马灯,一时还不知道从何下手.在网上看了几个 demo,并亲自运行了一下,是可以实现的.但是,能运行不知其所以然也不行 ...
- 如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...
- 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- 7.纯 CSS 创作一个 3D 文字跑马灯特效
原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <div class="box"& ...
- CSS效果:跑马灯按钮
HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
随机推荐
- 部署自建CA颁发证书实现https加密
理论忽略:百度上很多 需求:自建证书并实现域名的https加密 部署: 在linux机器上执行以下命令生成私钥 mkdir -p /opt/ssl-cert cd /opt/ssl-cert 1.# ...
- Python Django-入门到进阶
web应用 Python-web应用 +HTTP协议 +web框架 第二篇:Djangon简介 Diango 框架起步 Python-Django基础 第三篇:路由控制 Python-Django 路 ...
- 2018-2019-2 20165314『网络对抗技术』Exp5:MSF基础应用
一.原理与实践说明 1.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实践,如ms08-067; (1分) 一个针对浏览器的攻 ...
- Jenkins通过git tags进行回滚代码
配置Jenkins获取git tag代码的方式其实方法很多,目前我使用比较多的主要是通过Git Parameter 来配置动态的获取最新tags代码,主要我们首先需要安装一下Git Parameter ...
- 小米Note 2简单卡刷开发版启用root超级权限的步骤
小米的机器不同手机型号一般MIUI官方论坛都提供两个不同版本,分别为稳定版和开发版,稳定版没有提供Root超级权限管理,开发版中就开启了Root超级权限,较多时候我们需要使用的一些功能强大的软件,都需 ...
- Netty开发redis客户端,Netty发送redis命令,netty解析redis消息
关键字:Netty开发redis客户端,Netty发送redis命令,netty解析redis消息, netty redis ,redis RESP协议.redis客户端,netty redis协议 ...
- .net 获取配置文件AppSettings的键值
//AppSettings.config 节点代码 <appSettings> <add key="IsUpdate" value="false&quo ...
- Excel—数学函数
ROUND(四舍五入函数)就是说把一个小数点后多位的数四舍五入小数点位数的函数 函数语法:ROUND(哪个数,要四舍五入到小数点后几位) ROUNDUP(保留小数点几位后进位的函数)就是说要保留一个小 ...
- UOJ#291. 【ZJOI2017】树状数组 树套树
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ291.html 题解 结论:这个写错的树状数组支持的是后缀加和后缀求和.这里的后缀求和在 x = 0 的时 ...
- C语言--第五次作业--指针
1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 没想到都已经学习完C语言的灵魂-指针的内容了(当然也是C里面最难学习的内容了).虽然在之前就有听学习进度比较 ...