结合 CSS3 transition transform 实现简单的跑马灯效果的示例


Posted in HTML / CSS onFebruary 07, 2018

这是之前客户的一个需求,给的 demo 是用 gif 实现跑马灯,但是我们的没法用 gif,因为图上的文字需要翻译成各国语言,所以不能使用图片来实现,那么,自己写一个咯。

思考过程

结合 CSS3 transition transform 实现简单的跑马灯效果的示例

html

<div lantern>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

css

* {
  margin: 0;
  padding: 0;
}

[lantern] {
  overflow: hidden;
}

ul {
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  transition: transform 0s linear;
}

li {
  width: 50vw;
  border: 1px solid red;
  display: inline-block;
  height: 30px;
  font-size: 16px;
}

js

function lantern($element,speed = 10) {
    let liWidth = 0;
    let $ul = $element.find("ul");

    function run(init = false) {
      let $li = $ul.find("li").first();
      liWidth = $li.outerWidth();

      if(!init){
        $ul.append($li[0].outerHTML);
        $li.remove();
      }
      
      $ul[0].style.transitionDuration = "0s";
      $ul[0].style.transform = "translateX(0)";

      setTimeout(function() {
        $ul[0].style.transitionDuration = speed + "s";
        $ul[0].style.transform = "translateX(-" + liWidth + "px)";
      }, 20);
    }

    run(true);
    setTimeout(() => {
      setInterval(run, speed * 1000);
    }, 0);
  }
 
lantern($('[lantern]'), 20);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 #HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 #HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 #HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 #HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 #HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 #HTML / CSS
You might like
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php实现加减法验证码代码
2014/02/14 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python实现多人聊天室
2020/03/31 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python检测数据类型的方法总结
2019/05/20 Python
简单了解django文件下载方式
2020/02/10 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
教师节商场活动方案
2014/02/13 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL