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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP实现货币换算的方法
2014/11/29 PHP
分享PHP守护进程类
2015/12/30 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python定义一个函数的方法
2020/06/15 Python
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
百度JavaScript笔试题
2015/01/15 面试题
学生会干部自荐信
2014/02/04 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书