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


Posted in HTML / CSS onMarch 30, 2021

文字轮播在生活中很常见,各个超市及实体店门头通常会有文字轮播的广告牌,本文详细介绍下实现逻辑。

场景

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

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

逻辑说明

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

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

  • 文字水平移动
  • 文字首尾相接 

第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实现文字无限轮播内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
You might like
javaScript同意等待代码实现心得
2011/01/01 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
微信小程序实现animation动画
2018/01/26 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
gulp构建小程序的方法步骤
2019/05/31 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
js实现烟花特效
2020/03/02 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
深入浅析python的第三方库pandas
2020/02/13 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
工作表现评语
2014/01/19 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
经营目标责任书
2015/05/08 职场文书
总经理聘用协议书
2015/09/21 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
mysql 子查询的使用
2022/04/28 MySQL