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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
为什么你写的height:100%不起作用
May 10 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的FTP学习(四)
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python爬虫添加请求头代码实例
2019/12/28 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python安装后的目录在哪里
2020/06/21 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
关于读书的活动方案
2014/08/14 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书