基于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 回复

(必填)

(必填)

(可选)