原生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动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python3计算三角形的面积代码
2017/12/18 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Django操作session 的方法
2020/03/09 Python
详解python中的异常捕获
2020/12/15 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
收款委托书
2014/10/14 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
python中print格式化输出的问题
2021/04/16 Python