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制作登录表单的步骤
Apr 07 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php 团购折扣计算公式
2011/11/24 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
常用的js方法合集
2017/03/10 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
Python 异常处理实例详解
2014/03/12 Python
python基础教程项目三之万能的XML
2018/04/02 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python是怎么被发明的
2020/06/15 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
一套PHP的笔试题
2013/05/31 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
MySQL sql模式设置引起的问题
2022/05/15 MySQL