我们写奔跑的走马灯一般是通过js控制计时器不断循环发生的，但是计时器的消耗量很大，特别是在程序中经常使用计时器的时候，有时会感觉到卡。 但是，css3风格一般做不到。 这里的主要想法是用css3代替js计时器来实现简单的走马灯。
1、基本思路
这次的demo主要通过css3的动画来实现，通过变换的变换y属性的增减来实现dom位置的变化，并将其驱动。
------------------------html------------------请参阅
我流泪的不仅仅是昨晚的酒
舍不得离别的不仅仅是你的温柔
你还握着我的手多久了
让我为难的是挣扎自由
离别总是在9月想起的是思念的悲伤
秋天深绿色的垂柳亲吻着我的额头
在那个下雨的小镇上我从没忘记过你
成都不会带你去的只有你
走在成都的街道上吧
所有的灯都灭了也停不下来
你拽我的袖子，我把手放进裤袋里
走到玉林路尽头坐在居酒屋门口
我是最后一个
--------------CSS-------- marqueer
显示： block；
width: 100%；
文本对齐3360中心；
位置： absolute；
Overflow :隐藏；
- WebKit-animation 3360 marquee 15 slinearinfinite；
animation : marquee 15 slinearinfinite；
}
@keyframes marquee {
0% {
变换：变换y (0；
}
百分之百{
变换：变换y (-650 px； //每行高度为50
}
}
容易理解，该代码在进行状况为0时位移为0，在进行状况为100%时位移为100%。 根据css3动画原理，当100%时，在无限循环状态下，动画会自动叠加到进度为0的状态，从而实现循环动画。
但是，实际观察后发现，迁移效果非常差，100%-0%时会出现闪光跳跃的状态。 因此，重新计算0%和100%状态下的位置，在进度0之前添加末尾的项。 如下所示
------------------------html------------------请参阅
我是最后一个
我流泪的不仅仅是昨晚的酒
舍不得离别的不仅仅是你的温柔
你还握着我的手多久了
让我为难的是挣扎自由
离别总是在9月想起的是思念的悲伤
秋天深绿色的垂柳亲吻着我的额头
在那个下雨的小镇上我从没忘记过你
成都不会带你去的只有你
走在成都的街道上吧
所有的灯都灭了也停不下来
你拽我的袖子，我把手放进裤袋里
走到玉林路尽头坐在居酒屋门口
我是最后一个
--------------CSS-------- marqueer
显示： block；
width: 100%；
文本对齐3360中心；
位置： absolute；
Overflow :隐藏；
- WebKit-animation 3360 marquee 15 slinearinfinite；
animation : marquee 15 slinearinfinite；
}
@keyframes marquee {
0% {
变换：变换y (-25；
}
百分之百{
变换：变换y (-675 px； //每行高度为50
}
}
实际观察的话，就会发现这样有效果。 原理的根本是让闪烁跳跃
的前一帧和后一帧的位置重合，而此时下一条文本还没有完全露出，视觉上基本达到无缝连接状态。如果容器内会同时出现两条或以上文本内容时，可以在class="label_txt"位置再添加首尾项，实现动画的链接。综上我们就实现了完全由css3达成的跑马灯效果。
------------------------------------分割线------------------------------------------
虽然我们达到了这个目的，但是代码中还有不少问题。由于css3无法获取dom节点数量，因此100%进度时的位移量只能写死。
less在部分插件中可以实现获取dom相关内容，但是还是需要引入js，本质上还是通过js获取dom数量
另一种思路就是保留固定长度，通过js填充或打乱重选保证dom数量。比如我们设置一个的位移量等于14个dom节点的高度，在配置内容不足时，通过js循环一下补充到14个。而一旦大于就只能删除一部分了或者随机填充。
-----------------------------------峰回路转分割线----------------------------------
js可以直接操作keyframe内部的属性！！！！666，这样的话就简单啦。页面初始化的时候
varcssRule;
//Returns a reference to the specified CSS rule(s).
functiongetRule() {
varrule;
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对象更新不同进度的状态即可。但值得注意的是仅仅是删除的时候动画效果并不会改变，要在添加上替换的才会其效果哦~~
测试:
CSS3实现跑马灯效果
}@keyframes marquee{0% {
transform:translateX(195);
}100%{transform:translateX(-100%);// 每行高50}}
让我掉下眼泪的 不止昨夜的酒
让我依依不舍的 不止你的温柔
余路还要走多久 你攥着我的手
让我感到为难的 是挣扎的自由
分别总是在九月 回忆是思念的愁
深秋嫩绿的垂柳 亲吻着我额头
在那座阴雨的小城里 我从未忘记你
成都 带不走的 只有你
和我在成都的街头走一走
直到所有的灯都熄灭了也不停留
你会挽着我的衣袖 我会把手揣进裤兜
走到玉林路的尽头 坐在(走过)小酒馆的门口
我是最后一个