css3 transition 和 animation实现走马灯
这段时间在做一个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实现走马灯的更多相关文章
- css3 transition和animation的区别与联系
1. transition 一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性: transition-property:动画展示哪些属性,可以使用all关键字: transition ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- css3的动画特效--元素旋转(transition,animation)
开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
随机推荐
- wp8数据存储--独立存储文件 【转】
出自 : http://www.cnblogs.com/MyBeN/p/3339019.html 文章篇幅有点大,建议去源网看看 1.调用手机的独立存储 例如:IsolatedStorageFile ...
- PHP语言开发微信公众平台(订阅号)之curl命令
在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...
- cuda学习笔记——deviceQuery
main(int argc, char **argv):argc是参数个数,**argv具体的参数,第0个是程序全名 cudaError_t类型:记录cuda错误,值为cudaSuccess则正确执行 ...
- 用C写一个web服务器(二) I/O多路复用之epoll
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- mac压缩文件乱码
http://blog.b3inside.com/apple/solve-file-name-garbled-with-betterzip/
- 浩哥解析MyBatis源码(二)——Environment环境
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6625612.html 本应该先开始说Configuration配置类的,但是这个类有点过于 ...
- Sql(in与exists)
1.如果查询的两表大小相当,那么用in和exists差别不大,如果两个表中一个较小一个较大,则子查询表小的用exists,子查询表大的用in. 2.not in逻辑上不完全等同于not exists, ...
- 【2017-03-30】JS-document对象
一.获取标记对象 1.document.getElementById("id"); 根据id找,最多找到一个. 2.document.getElementsByNa ...
- 2017-3-28 javaScript DOM 操作
一.DOM的基本概念:DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化得东西. 二.Windows 对象操作:1.属性和方法:属性(值或者子对象):o ...
- iOS 按钮连续提交执行一次(如留言提交,多次拍照问题)
在很多项目中暴力测试时会出现多次点击执行一个方法 可以用下面的语句进行解决 //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...