我们写跑马灯一般都是用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，这样的话就简单啦。页面初始化的时候
转载出自http://bbs.csdn.net/topics/391898522 >>>3楼
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>纯css3跑马灯demo
原文地址：http://www.cnblogs.com/qlqwjy/p/7466268.html