原生CSS实现文字无限轮播的通用方法
发布时间：2021-03-24 15:16:56 作者：山水好风光 
我要评论
我要评论这篇文章主要介绍了原生CSS实现文字无限轮播的通用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
文字轮播在生活中很常见，各个超市及实体店门头通常会有文字轮播的广告牌，本文详细介绍下实现逻辑。
场景
商店门头广告牌，需要通过横向移动的文字来展示公告（加边框是为了更好演示）。
逻辑说明
实现文字无限轮转的逻辑主要有两点：
- 文字水平移动
- 文字首尾相接
第1点实现方法是使用CSS动画，transform: translateX(-50%)，即往左平移自身的一半。
第2点实现方法，跟第1点有关。CSS动画在默认情况下播放完成后是突变的，即播放完成时位置突变到初始位置（突变是瞬间完成的，人肉眼感知不到），因此我们可以利用突变来实现文字首尾相接。
我们用两段相同的文本，当第一段文本播放完毕，开始播放第二段文本时，此时动画突变又开始重新播放第一段文字，因两段文字内容一样，所以用户无感知。
思考
目前这种实现方式是通用的吗？
这种方式其实已经解决了大部分需求，但是当文字比较少，当文字的宽度小于窗口宽度时，是有问题的，我画的轮转逻辑示意图只是其中的一种情况。
当文字的宽度小于窗口宽度时，如何实现？
其实道理都一样，文字轮转核心之一是需要两段相同的文本，但它是有前提的，前提是一段文本的宽度必须大于窗口的宽度。
如何达到这个前提条件？
答案是 整体复制文本直到文本的宽度大于窗口的宽度，然后再处理成两段相同的文本。
总结
文字无限轮转的要点如下：
- 文本宽度必须大于窗口宽度，文本宽度不够时就整体复制文本直到文本宽度大于窗口宽度
- 两段相同的文本
- 移动 50% 的距离
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字无限轮播</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#wrap {
overflow: hidden;
position: relative;
width: 200px;
height: 20px;
white-space: nowrap;
}
#inner {
position: absolute;
animation: slide 5s linear infinite;
}
#first{
display: inline-block;
border: 1px solid red;
}
#second{
display: inline-block;
border: 1px solid green;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<span id="first">本店主营拉面,刀削面,烩面,盖浇饭</span>
<span id="second">本店主营拉面,刀削面,烩面,盖浇饭</span>
</div>
</div>
</body>
</html>
到此这篇关于原生CSS实现文字无限轮播的通用方法的文章就介绍到这了,更多相关CSS实现文字无限轮播内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 这篇文章主要介绍了CSS3简易切割轮播图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-12-09
CSS3全屏图文幻灯片自动轮播特效代码是一款全屏大气的响应式图文幻灯片自动轮播切换特效代码带文字说明。2020-11-13
这篇文章主要介绍了CSS3 transition 实现通知消息轮播条,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-14- 这篇文章主要介绍了纯css实现轮播图banner自动轮换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-15
这篇文章主要介绍了HTML+CSS+JS实现堆叠轮播效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-08
今天给大家分享一款使用纯 CSS 实现的图片轮播/幻灯片，切换方式为淡入淡出效果，感兴趣的朋友下载源码吧2020-07-15
最新评论