结合 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实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 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
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python判断字符串与大小写转换
2015/06/08 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
墨西哥网上超市:Superama
2018/07/10 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
关键字final的用法
2013/10/02 面试题
竞选部长演讲稿
2014/04/26 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
企业法人代表证明书
2014/09/27 职场文书
瘦西湖导游词
2015/02/03 职场文书
谢师宴家长答谢词
2015/09/30 职场文书