基于CSS3 animation實現Marquee效果打賞

最近實現手機端小游戲,看到有同事用到老掉牙的marquee標簽,就不說html5已經廢棄此標簽了,單是性能就已經夠嗆,于是想換種實現方案,第一想法自然是js實現,當然也是最為靈活的,這里不再贅述。

期間曾看到有相關文章描述overflow實現的Marquee,用法如下:

overflow:-webkit-marquee;

嘗試一下并無效果,最后發現30+的chrome版本中,Google已經把這玩意移除了。

另外就是今天的主角——CSS3 animation,依然很簡單:

 .marquee {
     margin: 0 auto;
     white-space: nowrap;
     overflow: hidden;
     box-sizing: border-box;
 }

 .marquee span {
     display: inline-block;
     padding-left: 100%;
     animation: marquee 15s linear infinite;
 }

 .marquee span:hover {
     animation-play-state: paused
 }
<p class="marquee"><span>測試文本</span></p>

需要注意的是,這里有用到

animation: marquee 15s linear infinite;

即,15s內播放完一次,無限次線性重復,但是問題就來了,如果我們內容固定尚可,但是若內容動態變化,就會出現速度不穩定的情況,所以這里我們需要動態計算一下播放時間,通過內聯樣式寫入DOM節點,這樣就基本完美了,至少采用CSS3渲染動畫,比JS效果要高那么一籌。

當然,這里還是有些小問題,比如重新賦值時抖動等,這些無論是早期marquee還是js都不能非常完美的解決,只能自己根據實際情況確定方案了,比如固定寬度JS計算位置等。

小記錄方便以后使用。

基于CSS3 animation實現Marquee效果
文章《基于CSS3 animation實現Marquee效果》二維碼
  • 微信打賞
  • 支付寶打賞

已有7條評論

  1. 花夏

    想問一下怎么動態計算播放時間

    2019-09-09 11:24 回復
  2. 嘻嘻嘻

    動畫marquee在哪

    2019-08-28 10:39 回復
  3. ff

    超出的內容被隱藏了,就算是滾動,超出的內容也沒有出現,坑

    2018-05-10 16:54 回復
    • ff

      sorry,我自己的問題,已經解決,謝謝博主

      2018-05-10 17:36 回復
  4. 康香伯

    看過,的確不錯。謝謝博主

    2015-12-31 15:59 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖