純css3跑馬燈demo

2022-06-01 02:21:06 字數 3237 閱讀 1247

我們寫跑馬燈一般都是用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 


@keyframes marquee 


100% 


}

這段**比較容易理解，就是在進度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 


@keyframes marquee 


100% 


}

實際觀察可以發現，這樣效果就好很多。原理的根本就是讓閃跳的前一幀和後一幀的位置重合，而此時下一條文字還沒有完全露出，視覺上基本

達到無縫連線狀態。如果容器內會同時出現兩條或以上文字內容時，可以在class="label_txt"位置再新增首尾項，實現動畫的鏈結。綜上我們就實現了完全由css3達成的跑馬燈效果。

------------------------------------分割線------------------------------------------

雖然我們達到了這個目的，但是**中還有不少問題。由於css3無法獲取dom節點數量，因此100%進度時的位移量只能寫死。

另一種思路就是保留固定長度，通過js填充或打亂重選保證dom數量。比如我們設定乙個的位移量等於14個dom節點的高度，在配置內容不足時，通過js迴圈一下補充到14個。而一旦大於就只能刪除一部分了或者隨機填充。

-----------------------------------峰迴路轉分割線----------------------------------

js可以直接操作keyframe內部的屬性！！！！666，這樣的話就簡單啦。頁面初始化的時候

**出自 >>>3樓

varcssrule; //

returns a reference to the specified css rule(s).

function

getrule() }}}

cssrule.deleterule("0");

cssrule.deleterule("1");

通過cssrule物件更新不同進度的狀態即可。但值得注意的是僅僅是刪除的時候動畫效果並不會改變，要在新增上替換的才會其效果哦~~

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

後面我們再換種方式，用requestanimationframe來試試~~

文字跑馬燈的CSS實現

使用 transform perspective 300px rotatey 67.3deg perspective 屬性定義 3d 元素距檢視的距離，與 perspective origin 屬性一同使用該屬性，就能夠改變 3d 元素的底部位置。transform origin 設定旋轉元素的基點...

html純CSS樣式實現文字的跑馬燈 流光 特效

於飛seo 以上 中，使用了css中的 animation 屬性，linear gradient 函式，以及 keyframes 規則來實現的 1 animation 屬性 animation 是css3中新增的屬性，它可以製作出多種酷炫的動畫效果，如果對flash有一定的了解，那這個屬性就會很容易...

css3 走馬燈效果

純css3實現了乙個正六邊形的走馬燈效果，記錄一下css3動畫的學習情況，效果如下 主要用到的css3技術有 keyframes perspective perspective origin transform translate rotate animation transform origin，...