利用<div>层 和<img>标签,实现一个图片两个动画效果
2015-02-09 14:47
856 查看
需求:令一枚图片先“从左上到右下”放大并“抖动”,再从“右上到左下”一直运动下去。
技术:html5 + css3
实现:
1、通过动画属性,改变图片所在<div>层的大小:
2、通过动画效果,改变<img>本身的效果:
技术:html5 + css3
实现:
1、通过动画属性,改变图片所在<div>层的大小:
#div_cloud{ position: relative; -webkit-animation: cloud_infinite_move 2s infinite; }
@-webkit-keyframes cloud_infinite_move{
0%{ top: 0px;left: 0px;} 50%{ top: -10px;left: 10px;} 100%{ top: 0px;left: 0px;}<span style="font-family: Arial, Helvetica, sans-serif;">}</span>
2、通过动画效果,改变<img>本身的效果:
#div_cloud{ position: relative; -webkit-animation: cloud_infinite_move 2s infinite; }
@-webkit-keyframes topcloud_show{<span style="font-family: Arial, Helvetica, sans-serif;">0%{width: 10px; height: 10px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">50%{width: 40px; height: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">75%{width: 36px; height: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">85%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">90%{top: 36px;left: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">100%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span>
相关文章推荐
- (礼拜一log)前端开发:<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
- <MFC_8>2D游戏效果之五:一个跑酷游戏的小Demo
- <Linux+Qt>在Widget中使用qlabel显示图片与动画
- Android UI设计之<二>自定义SwitchButton开关,实现类似IOS中UISwitch的动画效果
- 利用Jsoup解析html,如何得到<img>标签的位置
- <c:foreach>实现阑珊效果
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- struts2中的<sd:datetimepiicker>标签的实现
- 通过CSS使得<img>标签变灰,从而图片看起来变灰
- <html:errors/> 一个jsp里两个或多个<html:errors/> 分别显示错误信息
- text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签
- <Jquery>一个简单的切换与滑动效果
- <iOS>隐显动画效果一点小说明
- jquery,当把鼠标 移到某<div/>上时,把鼠标形状 换成自己的一个小图片。
- FreeMarker编写一个用于实现<select/>效果的通用指令
- 解决两个标签元素过大 span 和 p标签 <ul><ol>
- css div标签必须用<div></div>关闭
- <img>标签的alt属性与title属性的区别
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- <img src="中文文件名" /> 无法显示图片,图片名改成英文就可以显示;试了下在电脑桌面写了个HTML测试下,可以显示中文名称的图片,解决方法