标签:otn diy vss rto rc4 owa jic vdi idm
---------------------------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
}
}
---------------------------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
}
}
实际观察可以发现,这样效果就好很多。原理的根本就是让闪跳的前一帧和后一帧的位置重合,而此时下一条文本还没有完全露出,视觉上基本
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; }");
<!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>
标签:otn diy vss rto rc4 owa jic vdi idm
原文地址:http://www.cnblogs.com/qlqwjy/p/7466268.html