这段时间在做一个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. javascript-基本数据类型和转换

    ECMAScript中有5种基本数据类型:Undefined.Null.Boolean.Number.String.还有1种复杂数据类型-Object,Object实质上是由一组无序的名值对(键值对) ...

  2. [笔记]LibSVM源码剖析（java版）

    之前学习了SVM的原理(见http://www.cnblogs.com/bentuwuying/p/6444249.html),以及SMO算法的理论基础(见http://www.cnblogs.com ...

  3. El表达式的用法个人总结

    EL表达式的好处: 通过EL可以简化在JSP开发中对对象的引用,从而规范页面代码,增加程序的可读性及可维护性. EL表达式的几个特点:  1:可以与jsp标签库结合使用,也可以与javascript语 ...

  4. QQ互联 redirect uri is illegal(100010)的解决办法，很简单

    我的地址栏内容是:http://openapi.qzone.qq.com/oauth/show?which=ConfirmPage&display=pc&response_type=c ...

  5. 【Unity优化】如何实现Unity编辑器中的协程

    Unity编辑器中何时需要协程 当我们定制Unity编辑器的时候,往往需要启动额外的协程或者线程进行处理.比如当执行一些界面更新的时候,需要大量计算,如果用户在不断修正一个参数,比如从1变化到2,这种 ...

  6. Git远程仓库(二)

    昨天讲了Git安装使用和基本的命令,今天我说一下如何通过Git将本地管理的仓库添加到远程库 首先我们需要在www.github.com(如果打不开网页,请注意科学上网)上注册一个免费的账号,邮箱验证完 ...

  7. Windows 10 IoT Serials 7 – 如何用树莓派制作家庭流媒体播放器

    Windows 10平台引入了AllJoyn开源软件框架,它提供了一组服务可以创建动态近端网络,让设备可以相互连接实现功能交互.目前,AllJoyn开源软件框架由AllSeen联盟负责管理.AllSe ...

  8. 获取 metadata 过程详解 - 每天5分钟玩转 OpenStack（167）

    接上节,启动 neutron router 后 instance c1 终于拿到了 metadata, 从下面 c1 的启动日志可知: c1 所认为的 metadata 服务地址是 169.254.1 ...

  9. Docker（开课吧笔记）

    1.Docker基本概念 Docker运行在Linux,需要git技能 docker官网解析   来源于容器又不仅仅是容器,第一个版本基于LXC,远远超过容器概念   交付时拿到的是镜像,直接run运 ...

  10. 会话管理（Cookie/Session技术）

    什么是会话:用户打开浏览器,点击多个超链接,访问服务器的多个web资源,然后关闭浏览器,整个过程就称为一个会话: 会话过程需要解决的问题:每个用户在使用浏览器与服务器进行会话的过程中,都可能会产生一些 ...