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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
把77A收信机改造成收音机
2021/03/02 无线电
用PHP创建PDF中文文档
2006/10/09 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
js中有关IE版本检测
2012/01/04 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python抓取京东图书评论数据
2014/08/31 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
servlet面试题
2012/08/20 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
教师网络培训感言
2014/03/09 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
安全先进班组材料
2014/12/26 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
《迟到》教学反思
2016/02/24 职场文书