这段时间在做一个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. 对bootstrap不同版本的总结

    之前以为bootstrap2和bootstrap3没啥区别,无非就是功能增加了,简直是误区啊 bootstrap3与bootstrap2版本语法都不同啦 栅格写法 col-md-3/span3 文本效 ...

  2. java内部发送http请求并取得返回结果，修改response的cookie

    public Object userLogin(HttpServletRequest request, HttpServletResponse response, String email, Stri ...

  3. Javascript——依赖注入

    本人才学疏浅,本文只为抛砖引玉,欢迎各路大牛前来斧正,不胜感激! 如今各个框架都在模块化,连前端的javascript也不例外.每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:jav ...

  4. 第一章Python起步

    1.1搭建编程环境 编程环境的正确搭建很重要,一定要参考先搭配好环境变量,不然用着会很麻烦,在这里推荐使用工具pycharm,亿图图示画流程图,一定要正确安装,搭配好环境变量,后面要添加很多模块,前期 ...

  5. Spark（开课吧笔记）

    2016.07.14 1-Spark实战演练:Spark概述及生态环境 2.Spark实战演练:Spark vs Hadoop MapReduce     任意一条边有方向且不存在环路的图,一次执行所 ...

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

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

  7. Android Things教程：电气基础之直流电路理论

    译者注:由于本人水平有限,译文中难免会出现概念模糊.晦涩难懂,如果实在没心思看下去,请发挥你的学习能动性,到原文中自行翻译,感谢!!!点这里,直达英文各种长句的世界. 好了,既然你选择继续往下看,那就 ...

  8. 用async 解放你的大脑

    在js中,代码嵌套和代码回调非常常见,不仅编写麻烦而且异常反人类.让我等码农很是头痛 function () {     function () {         function () {     ...

  9. RegExp类型（正则表达式）

    直接量语法 /pattern/attributes 创建 RegExp 对象的语法: new RegExp(pattern, attributes); 一.attributes: 修饰符 描述 i 执 ...

  10. xlwt 格式控制

    Examples Generating Excel Documents Using Python’s xlwt 使用Python的xlwt生成Excel文档示例 Here are some simpl ...