原生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 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
You might like
php页面缓存方法小结
2015/01/10 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
周年庆典邀请函范文
2014/01/23 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
女娲补天教学反思
2014/02/05 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
文明倡议书范文
2014/04/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
学前教育见习总结
2015/06/23 职场文书
企业年会祝酒词
2015/08/11 职场文书
实习报告怎么写
2019/06/20 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技