我們寫跑馬燈一般都是用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>
第二個例子:
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: 100%; text-align: right; overflow: hidden; -webkit-animation: marquee 20s linear infinite; animation: marquee 20s linear infinite; } @-webkit-keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); // 每行高50 } } @keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); // 每行高50 } } @-webkit-keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); // 每行高50 } }
