一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

原生CSS实现文字无限轮播通用方法代码

时间:2021-04-01 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下原生CSS实现文字无限轮播通用方法代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

场景

商店门头广告牌,需要通过横向移动的文字来展示公告(加边框是为了更好演示)。

逻辑说明

实现文字无限轮转的逻辑主要有两点:

文字水平移动

文字首尾相接

第1点实现方法是使用CSS动画,transform: translateX(-50%),即往左平移自身的一半。

第2点实现方法,跟第1点有关。CSS动画在默认情况下播放完成后是突变的,即播放完成时位置突变到初始位置(突变是瞬间完成的,人肉眼感知不到),因此我们可以利用突变来实现文字首尾相接。

我们用两段相同的文本,当第一段文本播放完毕,开始播放第二段文本时,此时动画突变又开始重新播放第一段文字,因两段文字内容一样,所以用户无感知。

思考

目前这种实现方式是通用的吗?

这种方式其实已经解决了大部分需求,但是当文字比较少,当文字的宽度小于窗口宽度时,是有问题的,我画的轮转逻辑示意图只是其中的一种情况。

当文字的宽度小于窗口宽度时,如何实现?

其实道理都一样,文字轮转核心之一是需要两段相同的文本,但它是有前提的,前提是一段文本的宽度必须大于窗口的宽度。

如何达到这个前提条件?

答案是 整体复制文本直到文本的宽度大于窗口的宽度,然后再处理成两段相同的文本。

总结

文字无限轮转的要点如下:

文本宽度必须大于窗口宽度,文本宽度不够时就整体复制文本直到文本宽度大于窗口宽度

两段相同的文本

移动 50% 的距离

代码:

css;">


    
    
    
本店主营拉面,刀削面,烩面,盖浇饭 本店主营拉面,刀削面,烩面,盖浇饭

热门栏目