原生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 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
You might like
php字符串函数学习之strstr()
2015/03/27 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python删除不需要的python文件方法
2018/04/24 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Flask之flask-session的具体使用
2018/07/26 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python读取stdin方法实例
2019/05/24 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
中秋客户感谢信
2015/01/22 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
《给予树》教学反思
2016/03/03 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书