这段时间在做一个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. Android Socket 遇到的Soure Not Find 错误

    参考: http://blog.csdn.net/brokge/article/details/8543145 http://blog.csdn.net/mad1989/article/details ...

  2. ps-色彩饱和度的设计

    1-    图层区—复制背景图层            防止原图修改失败后无法还原 2-    选项区——选择—色彩范围              以色彩为标准来对图片进行选区 3-    点击图片上 ...

  3. 初识Javascript.03 -- switch、自增、while循环、for、break、continue、数组、遍历数组、合并数组concat

    除了注意大小写,别的木啥了 Switch语句 Switch(变量){ case 1: 如果变量和1的值相同,执行该处代码 break; case 2: 如果变量和2的值相同,执行该处代码 break; ...

  4. CSS.06 -- 尚合网页模拟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python复习。知识点小记

    1.对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应的字符: >>> ord('A') >>> ord('中' ...

  6. 微信sdk

    <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <t ...

  7. 关于SQL的一些小知识

    在代码中调用存储过程的时,必须先测试存储过程,存储过程测试成功之后再去java中去调用!!@!@#!@!@! 以后自己写的存储过程写一个本地保存一个.!~~~!!(这个很关键) 以后在代码中的SQL都 ...

  8. 性能调优案例分享：jvm crash的原因 2

    3.core dump分析 有了core dump文件,接下来要做的就是通过命令去解析此文件,定位具体问题了,主要有以下三个命令: (1)先执行gdb $JAVA_HOME$/bin/java cor ...

  9. linux 压缩与解压

    tar -cvf test.tar test  ----将test文件夹打包成test.tar. # tar -xvf test.tar     ----将test.tar 进行拆解,从中抽取文件 # ...

  10. VC加载显示bmp图片的函数

    void ShowBitmap(HDC hdc,const char *srcpath) { HBITMAP hBitmap = (HBITMAP)::LoadImage(0, srcpath, IM ...