这段时间在做一个App，H5的开发。页面上有公告 以走马灯的形式显示出来。

在开始直接用的marquee标签，后来发现在ios客户端，走马灯移动不够平滑，有抖动现象。

对于有强迫症的我而言是无法忍受的，后来就用js来写，发现andriod和ios客户端 的走马灯移动都不平滑，会抖动。

后来想到了可以用css3的transition和animation来写，分享一下代码！

transition写法

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>marquee</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

}

#demo{

width: 100%;

height: 50px;

background: #eee;

position: fixed;

}

#demo>#spa{

word-break:keep-all;

white-space:nowrap;

position: absolute;

left: 100%;

font-size: 30px;

line-height: 50px;

}

</style>

</head>

<body>

    <div id="demo"><span id='spa' >走马灯效果</span></div>

</body>

<script type="text/javascript">

     var spa = document.getElementById("spa");

     var spaw = spa.offsetWidth;

     var bodyw = document.body.clientWidth;

     var w = 0-(spaw+bodyw);

     spa.style.transform = 'translate(' + w + 'px, 0px)';

     spa.style.transition = 'transform 5s linear';

     window.setInterval(function(){

          spa.style.transform = 'translate(0px, 0px)';

          spa.style.transition = 'transform 0s linear';

          window.setTimeout(function(){

               spa.style.transform = 'translate(' + w + 'px, 0px)';

               spa.style.transition = 'transform 5s linear';

          },100)

     },5000)

</script>

</html>

注意的是在iphone4s 上 ，transition属性建议分开写，直接写transition上设置四个属性的话，ihone4s的浏览器不能识别。

animation写法

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>marquee</title>

<style type="text/css">

#demo{

width: 100%;

height: 50px;

background: #eee;

position: fixed;

}

#demo>span{

word-break:keep-all;

white-space:nowrap;

position: absolute;

left: 100%;

font-size: 30px;

line-height: 50px;

}

#demo>.a{

-webkit-animation:demo 5s infinite;

-webkit-animation-timing-function:linear;

}

</style>

<style id='asty'></style>

</head>

<body>

    <div id="demo"><span id='spa' class='a'>走马灯效果</span></div>

</body>

<script type="text/javascript">

    var spa = document.getElementById("spa");

    var width = 0-(spa.offsetWidth);

    var style = document.getElementById("asty");

    style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';

    spa.className = 'a';

</script>

</html>

css3 transition 和 animation实现走马灯的更多相关文章

  1. css3 transition和animation的区别与联系

    1. transition 一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性: transition-property:动画展示哪些属性,可以使用all关键字: transition ...

  2. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  3. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  4. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  8. css3的动画特效--元素旋转（transition，animation）

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  9. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

随机推荐

  1. C++11右值引用和std::move语句实例解析

    关键字:C++11,右值引用,rvalue,std::move,VS 2015 OS:Windows 10 右值引用(及其支持的Move语意和完美转发)是C++0x将要加入的最重大语言特性之一.从实践 ...

  2. vue学习笔记 模板语法（三）

    <div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...

  3. loadrunner提高篇-插入检查点与关联函数

    插入检查点   靠LR自动生成的脚本是不够的,很难达到业务要求,因此需要对录制完的脚本进行完善,使其能达到业务模拟的要求 ,这样尽可能地使虚拟用户模拟时更接近用户的实际使用. 在进行压力测试时,经常会 ...

  4. C#封装MongoDB工具类库

    什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供可扩 ...

  5. HackerRank The Chosen One [预处理][gcd]

    题解:tags:[预处理][gcd]故事背景:光头钻进了茫茫人海.这是一个典型の通过前缀后缀和来降低复杂度的问题.先用pre数组与suf数组分别维护前缀gcd和后缀gcd.如果 a[i] % gcd( ...

  6. redis实现队列消息的ack

    由于公司提供的队列实在太过于蛋疼而且还限制不能使用其他队列,但为了保证数据安全性需要一个可以有ack功能的队列. 原生的redis中通过L/R PUSH/POP方式来实现队列的功能,这个当然是没办法满 ...

  7. 【Egret】里使用iframe标签达到内嵌多个web界面

    目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果: 目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下: 一..在 ...

  8. 手机自动化测试：appium源码分析之bootstrap一

    手机自动化测试:appium源码分析之bootstrap一   前言: poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.popte ...

  9. laravel blade $loop

    laravel 5.3 blade 新增$loop变量 文档如下: 在Laravel 5.3中,@foreach指令提供了更加强大的功能,在每一个@foreach循环体中都可以调用一个新的$loop变 ...

  10. css定位流布局

    上面我们一起研究了浮动布局的特点和如何清除浮动给布局带来的不良影响,今天我们继续来研究定位流布局的特点和一些常用的布局技巧. 定位流主要有三种,一是相对定位,二是绝对定位,三是固定定位:下面我们一一进 ...