这段时间在做一个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. Mysql5.7服务下载安装

    身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...

  2. JavaWeb之JSTL标签

    JSP中有了EL可以很方便的引用对象和属性,但是也有一些不足的地方,比如不能遍历对象列表这些,再加上JSTL(Java Standard Tag Library)的话那就完美了.JSTL主要包括cor ...

  3. javascript中的字符串编码、字符串方法详解

    js中的字符串是一种类数组,采用UTF-16编码的Unicode字符集,意味字符串的每个字符可用下标方式获取,而每个字符串在内存中都是一个16位值组成的序列.js对字符串的各项操作均是在对16位值进行 ...

  4. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  5. 用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  6. 利用select实现伪并发的socket

    使用socket模块可以实现程序之间的通信,但是server在同一时刻只能和一个客户端进行通信,如果要实现一个server端可以和多个客户端进行通信可以使用 1.多线程 2.多进程 3.select ...

  7. 开发Nagios监控passwd文件插件

    第一步:开发脚本 [root@Admin libexec]# pwd /usr/local/nagios/libexec [root@Admin libexec]# cat check_passwd ...

  8. Windows上安装Kafka需要注意的几点

    1.不能安装在有空格的路径上 比如:D:\Program Files 2.设置日志路径时,要用"/",不能用Windows上的"\",比如: # A comma ...

  9. Linux系统date命令的参数及获取时间戳的方法

    date指令相关用法示例 date 用法: date [OPTION]... [+FORMAT]date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] ...

  10. 重温Javascript（一）

    工作中要用到JavaScript,一组复习笔记. 一些看法 1. 想想JavaScript目前最常用的宿主环境,浏览器或者服务端V8,都是单线程,所以不用过多的考虑并发的问题,如果是协程来实现异步的方 ...