结合 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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3使用多列制作瀑布流
May 10 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python下载微信公众号相关文章
2019/02/26 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
汽车维修专业自荐书
2014/05/26 职场文书
社区两委对照检查材料
2014/08/23 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript