我们写跑马灯一般都是用js控制定时器不断循环产生，但是定时器消耗比较大，特别是程序中很多用到定时器的时候，感觉有的时候比较卡。但是css3样式一般不会。这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯。
1、基本思路
这次demo主要是通过css3中的animation动画实现，借助transform中的translateY属性的增减实现dom位置的变化，让它跑起来。
---------------------------html----------------------------
<div class="marquee">
<div>
<p>让我掉下眼泪的 不止昨夜的酒</p>
<p>让我依依不舍的 不止你的温柔</p>
<p>余路还要走多久 你攥着我的手</p>
<p>让我感到为难的 是挣扎的自由</p>
<p>分别总是在九月 回忆是思念的愁</p>
<p>深秋嫩绿的垂柳 亲吻着我额头</p>
<p>在那座阴雨的小城里 我从未忘记你</p>
<p>成都 带不走的 只有你</p>
<p>和我在成都的街头走一走</p>
<p>直到所有的灯都熄灭了也不停留</p>
<p>你会挽着我的衣袖 我会把手揣进裤兜</p>
<p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
<p>我是最后一个</p>
</div>
</div>
----------------------------css-----------------------------
.marquee div {
display: block;
width: 100%;
text-align: center;
position: absolute;
overflow: hidden;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-650px); // 每行高50
}
}
这段代码比较容易理解，就是在进度0的时候位移为0，进度100%的时候位移100%。根据css3动画原理，在100%的时候无限循环状态下，动画会自动重叠到进度0的状态，进而实现循环动画。
但是通过实际观察可以发现，过渡效果很不好，100%-0%的时候会出现闪跳的状态，为此我们将0%以及100%状态下的位置重新计算，并在进度0前面添加一个末位项，如下
---------------------------html----------------------------
<div class="marquee">
<div>
<p class="label_txt">我是最后一个</p>
<p>让我掉下眼泪的 不止昨夜的酒</p>
<p>让我依依不舍的 不止你的温柔</p>
<p>余路还要走多久 你攥着我的手</p>
<p>让我感到为难的 是挣扎的自由</p>
<p>分别总是在九月 回忆是思念的愁</p>
<p>深秋嫩绿的垂柳 亲吻着我额头</p>
<p>在那座阴雨的小城里 我从未忘记你</p>
<p>成都 带不走的 只有你</p>
<p>和我在成都的街头走一走</p>
<p>直到所有的灯都熄灭了也不停留</p>
<p>你会挽着我的衣袖 我会把手揣进裤兜</p>
<p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
<p class="label_txt">我是最后一个</p>
</div>
</div>
----------------------------css-----------------------------
.marquee div {
display: block;
width: 100%;
text-align: center;
position: absolute;
overflow: hidden;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateY(-25);
}
100% {
transform: translateY(-675px); // 每行高50
}
}
实际观察可以发现，这样效果就好很多。原理的根本就是让闪跳的前一帧和后一帧的位置重合，而此时下一条文本还没有完全露出，视觉上基本
达到无缝连接状态。如果容器内会同时出现两条或以上文本内容时，可以在class="label_txt"位置再添加首尾项，实现动画的链接。综上我们就实现了完全由css3达成的跑马灯效果。
------------------------------------分割线------------------------------------------
虽然我们达到了这个目的，但是代码中还有不少问题。由于css3无法获取dom节点数量，因此100%进度时的位移量只能写死。
- less在部分插件中可以实现获取dom相关内容，但是还是需要引入js，本质上还是通过js获取dom数量
- 另一种思路就是保留固定长度，通过js填充或打乱重选保证dom数量。比如我们设置一个的位移量等于14个dom节点的高度，在配置内容不足时，通过js循环一下补充到14个。而一旦大于就只能删除一部分了或者随机填充。
-----------------------------------峰回路转分割线----------------------------------
js可以直接操作keyframe内部的属性！！！！666，这样的话就简单啦。页面初始化的时候
var cssRule;
// Returns a reference to the specified CSS rule(s).
function getRule() {
var rule;
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
// loop through all the rules!
for (var x = 0; x < ss[i].cssRules.length; ++x) {
rule = ss[i].cssRules[x];
if (rule.name == "marquee" && rule.type == CSSRule.KEYFRAMES_RULE) {
cssRule = rule;
}
}
}
}
cssRule.deleteRule("0");
cssRule.deleteRule("1");
cssRule.appendRule("0% { transform: translateY(-150px); opacity: 0; }");
cssRule.appendRule("100% { transform: translateY(0px); opacity: 1; }");
通过cssRule对象更新不同进度的状态即可。但值得注意的是仅仅是删除的时候动画效果并不会改变，要在添加上替换的才会其效果哦~~
测试:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现跑马灯效果</title>
<style>
.marquee div {
display: block;
width: 100%;
text-align: right;
position: absolute;
overflow: hidden;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(195);
}
100% {
transform: translateX(-100%); // 每行高50
}
}
</style>
<script>
</script>
</head>
<body>
<div class="marquee">
<div>
<p>让我掉下眼泪的 不止昨夜的酒</p>
<p>让我依依不舍的 不止你的温柔</p>
<p>余路还要走多久 你攥着我的手</p>
<p>让我感到为难的 是挣扎的自由</p>
<p>分别总是在九月 回忆是思念的愁</p>
<p>深秋嫩绿的垂柳 亲吻着我额头</p>
<p>在那座阴雨的小城里 我从未忘记你</p>
<p>成都 带不走的 只有你</p>
<p>和我在成都的街头走一走</p>
<p>直到所有的灯都熄灭了也不停留</p>
<p>你会挽着我的衣袖 我会把手揣进裤兜</p>
<p>走到玉林路的尽头 坐在(走过)小酒馆的门口</p>
<p>我是最后一个</p>
</div>
</div>
</body>
</html>
aaarticlea/png;base64,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" alt="" />
第二个例子:
html
<!--1.欢迎导航-->
<div id="welcome" style="font-size: 20px;text-align: right;">
<font color="#2E6DA4">Welcome </font>
<font color="#398439">to </font>
<font color="yellow">my </font>
<font color="red">blog !!!</font>
</div>
css
/*欢迎跑马灯*/
#welcome {
display: block;
width: %;
text-align: right;
overflow: hidden;
-webkit-animation: marquee 20s linear infinite;
animation: marquee 20s linear infinite;
}
@-webkit-keyframes marquee {
% {
transform: translateX(%);
}
% {
transform: translateX(-%); // 每行高50
}
}
@keyframes marquee {
% {
transform: translateX(%);
}
% {
transform: translateX(-%); // 每行高50
}
}
@-webkit-keyframes marquee {
% {
transform: translateX(%);
}
% {
transform: translateX(-%); // 每行高50
}
}
aaarticlea/png;base64,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" alt="" />
- 纯css3跑马灯demo
我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...
- [css3]跑马灯
<div class="marquee"> <div> <p>纯CSS3生成的走马灯效果</p> <p>纯CSS3生成的 ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- 纯css3写的仿真图书翻页效果
对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
随机推荐
- quartz 使用总结
quartz是一个任务调度框架,具体的用途比如说,我想我的程序在每天的3点干什么事,每隔多长时间做一件什么事.quartz框架就可以完美地解决这些. 1.xml配置方式 首先我是用spring来管理的 ...
- 对SE的认识
对SE的认识 简述 “架构师”,也就是SE,总是给外人一种比较牛逼的感觉,其实踏实做开发的真的很少关注这个title. 抛开这个名词,这个角色的存在的确有一定的意义,因为项目中需要一个能“带领大家前进 ...
- URAL 1736 Chinese Hockey（网络最大流）
Description Sergey and Denis closely followed the Chinese Football Championship, which has just come ...
- Daily Scrum 11.01
全队进展速度很快,11月伊始都完成了初步的工作.交由负责整合工作的毛宇开始调试整合. Member Today's task Tomorrow's task 李孟 task 616 测试 (活动) ...
- 软工实践 - 第二十五次作业 Beta 冲刺（3/7）
队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/10116979.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过 ...
- HTML文档插入JS代码的几种方法
在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间. 2.放置在由< script>标签的src属性指定的外部文件中 ...
- js把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
最近在做项目的时候,需要把后台返回的时间转换成几秒前.几分钟前.几小时前.几天前等的格式:后台返回的时间格式为:2015-07-30 09:36:10,需要根据当前的时间与返回的时间进行对比,最后显示 ...
- 一个flink作业的调优
最近接手了一个flink作业,另外一个同事断断续续有的没的写了半年的,不着急,也一直没上线,最近突然要上线,扔给我,要调通上线. 现状是: 1.代码跑不动,资源给的不少,但是就是频繁反压. 2.che ...
- Java空指针异常解决方法
Throwable是所有错误或异常的超类,只有当对象是这个类的实例时才能通过Java虚拟机或者Java throw语句抛出. 当Java运行环境发出异常时,会寻找处理该异常的catch块,找到对应的c ...
- online community
online community spectrum https://spectrum.chat/xgqfrms https://community.xgqfrms.xyz/ https://spect ...
