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

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

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

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

transition写法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>marquee</title>
  6. <style type="text/css">
  7. body{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. #demo{
  12. width: 100%;
  13. height: 50px;
  14. background: #eee;
  15. position: fixed;
  16. }
  17. #demo>#spa{
  18. word-break:keep-all;
  19. white-space:nowrap;
  20. position: absolute;
  21. left: 100%;
  22. font-size: 30px;
  23. line-height: 50px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28.     <div id="demo"><span id='spa' >走马灯效果</span></div>
  29. </body>
  30. <script type="text/javascript">
  31.      var spa = document.getElementById("spa");
  32.      var spaw = spa.offsetWidth;
  33.      var bodyw = document.body.clientWidth;
  34.      var w = 0-(spaw+bodyw);
  35.      spa.style.transform = 'translate(' + w + 'px, 0px)';
  36.      spa.style.transition = 'transform 5s linear';
  37.      window.setInterval(function(){
  38.           spa.style.transform = 'translate(0px, 0px)';
  39.           spa.style.transition = 'transform 0s linear';
  40.           window.setTimeout(function(){
  41.                spa.style.transform = 'translate(' + w + 'px, 0px)';
  42.                spa.style.transition = 'transform 5s linear';
  43.           },100)
  44.      },5000)
  45. </script>
  46. </html>

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

animation写法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>marquee</title>
  6. <style type="text/css">
  7. #demo{
  8. width: 100%;
  9. height: 50px;
  10. background: #eee;
  11. position: fixed;
  12. }
  13. #demo>span{
  14. word-break:keep-all;
  15. white-space:nowrap;
  16. position: absolute;
  17. left: 100%;
  18. font-size: 30px;
  19. line-height: 50px;
  20. }
  21. #demo>.a{
  22. -webkit-animation:demo 5s infinite;
  23. -webkit-animation-timing-function:linear;
  24. }
  25. </style>
  26. <style id='asty'></style>
  27. </head>
  28. <body>
  29.     <div id="demo"><span id='spa' class='a'>走马灯效果</span></div>
  30. </body>
  31. <script type="text/javascript">
  32.     var spa = document.getElementById("spa");
  33.     var width = 0-(spa.offsetWidth);
  34.     var style = document.getElementById("asty");
  35.     style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';
  36.     spa.className = 'a';
  37. </script>
  38. </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. Spring——<aop:scoped-proxy/>理解

    首先看一下Spring文档上的两个例子对比: <bean id="userPreferences" class="com.foo.UserPreferences&q ...

  2. QT Creator 快速入门教程 读书笔记（二）

    一 窗口部件 基础窗口部件QWidget类是所有用户界面对象的基类,窗口和控件都是直接或间接继承自 QWidget,下面我们来看一个很简单的例子: 窗口部件(Widget)简称部件,是QT中建立界面的 ...

  3. MyBatis快速入门（一）

    一.MyBatis背景介绍 MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的 ...

  4. Java变量和对象的作用域

    大多数程序设计语言都提供了"作用域"(Scope)的概念. 对于在作用域里定义的名字,作用域同时决定了它的"可见性"以及"存在时间".在C, ...

  5. webstorm中关于vue的一些问题

    在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...

  6. 参加光环国际PRINCE2培训

    挑战埃及是全球首套能够同时适配PRINCE2认证人群,PMP认证人群的项目管理沙盘演练游戏.沙盘通过使用乐高积木作为道具,通过一场互动性极强的情景模拟为全球项目经理还原了四千年前古埃及金字塔建造的情景 ...

  7. Mybatis 中一对多，多对一的配置

    现在有很多电商平台,就拿这个来说吧.顾客跟订单的关系,一个顾客可以有多张订单,但是一个订单只能对应一个顾客. 一对多的顾客 <?xml version="1.0" encod ...

  8. 更换gitlab公网IP，引发的故障。

    gitlab更换公网IP地址,导致gitlab非常的很卡,并且ssh方式添加的远程仓库是无法git pull 或者git push,只有是添加http方式的可以正常git pull和git push ...

  9. 老李推荐：第8章3节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 3

    首先它通过查找JVM中的System Property来找到"com.android.monkeyrunner.bindir"这个属性的值,记得前面小节运行环境初始化的时候在mon ...

  10. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...