原生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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
全面分析JavaScript 继承
2019/05/30 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
Python中的元类编程入门指引
2015/04/15 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
python创建n行m列数组示例
2019/12/02 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
业务总经理岗位职责
2014/02/03 职场文书
电视节目策划方案
2014/05/16 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
车间安全生产标语
2014/06/06 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技