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背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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函数指定默认值方法的小例子
2013/12/04 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
毕业设计计划书
2014/01/09 职场文书
信息技术培训感言
2014/03/06 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
住宅质量保证书
2014/04/29 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
中国梦读书活动总结
2014/07/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
换届选举主持词
2015/07/03 职场文书
感恩教师节主题班会
2015/08/12 职场文书
nginx 配置缓存
2022/05/11 Servers