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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python set内置函数的具体使用
2019/07/02 Python
PyTorch中的C++扩展实现
2020/04/02 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python实现画图工具
2020/08/27 Python
python爬虫---requests库的用法详解
2020/09/28 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
入党申请书自我鉴定
2013/10/12 职场文书
业务部经理岗位职责
2014/01/04 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
军训通讯稿范文
2015/07/18 职场文书