純css3跑馬燈demo

我們寫跑馬燈一般都是用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對象更新不同進度的狀態即可。但值得注意的是僅僅是刪除的時候動畫效果並不會改變，要在添加上替換的才會其效果哦~~

-----------------------------------end----------------------------------

     后面我們再換種方式，用requestAnimationFrame來試試~~