CSS3动画animation实现云彩向左滚动


Posted in HTML / CSS onMay 09, 2014

实现的图像动画效果大致是这样的:云彩向左滚动!
CSS3动画animation实现云彩向左滚动 
【代码效果】

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画animation实现漂浮的云</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.wrap {
height: 190px;
width: 600px;
margin: 150px auto 0;
background: url('bg-clouds.png');
-webkit-animation:cloud 40s linear infinite;
-o-animation:cloud 40s linear infinite;
}
@-webkit-keyframes cloud {
from{background-position:0% 0%}
to{background-position:50% 50%}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

【用到的素材】
CSS3动画animation实现云彩向左滚动
HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 #HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 #HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 #HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 #HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 #HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 #HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 #HTML / CSS
You might like
用PHP实现维护文件代码
2007/06/14 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
js Date概念详细介绍
2013/11/22 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue中监听返回键问题
2019/08/28 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
护士专业推荐信
2013/11/02 职场文书
《称象》教学反思
2014/04/25 职场文书
病危通知书样本
2015/04/17 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
html粘性页脚的具体使用
2022/01/18 HTML / CSS