纯css实现轮播效果,css实现轮播图无缝轮播

　　文字轮播在生活中很常见，超市、实体店门前一般都会有广告牌。本文详细介绍了实现逻辑。

场景

　　店门前的广告牌需要通过横向移动文字的方式显示公告(加边框是为了更好的演示)。

逻辑说明

　　实现角色无限旋转的逻辑主要有两个：

　　水平移动文本。实现的第一个方法是使用CSS动画，transform: translateX(-50%)，也就是把自己的一半向左平移。

　　第2点的实现方法与第1点相关。CSS默认是播放后突变，即播放完毕时，位置突变到初始位置(突变是瞬间的，肉眼察觉不到)，所以我们可以用突变来实现单词的端到端连接。

　　我们使用两个相同的文本。当第一个文本结束播放，第二个文本开始播放时，动画突然再次开始播放第一个文本。因为两个文本具有相同的内容，所以用户没有感知。

思考

　　这种实现目前通用吗？

　　其实这个方法已经解决了大部分需求，但是当字比较少，字的宽度小于窗口宽度的时候，就有问题了。我画的旋转图只是其中之一。

　　当文字宽度小于窗口宽度时，如何实现？

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

　　如何达到这个前提条件？

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

总结

　　单词无限旋转的要点如下：

　　文本宽度必须大于窗口宽度。如果文本宽度不够，复制整个文本，直到文本宽度大于窗口宽度。两个相同文本段落的距离代码为50%:

　　！doctype HTML HTML lang= en head meta charaset= UTF-8 /meta name= viewport content= width=device-width，initial-scale=1.0/title text无限旋转/title style body { display:flex；justify-content:居中；对齐-项目：居中；身高：100vh} #wrap {溢出：隐藏；位置：相对；宽度：200px高度：20px空白：nowrap} # inner { position:absolute；动画：幻灯片5s线性无限；} # first { display:inline-block；边框：1px纯红；} # second { display:inline-block；边框：1px纯绿；} @ key frames slide { 0% { transform:translate x(0)；} 100% { transform:translate x(-50%)；} }/style/head body div ID= wrap div ID= inner span ID=第一本店专营拉面、刀削面、徽面、盖饭/span span id=第二本店专营拉面、刀削面、徽面，盖饭/span /div/div/body/html给你。本文介绍了native CSS实现无限字符轮播的一般方法。关于CSS实现角色无限轮播的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。