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 相关文章推荐
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 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
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
canvas实现钟表效果
2017/02/13 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
js数组去重的方法总结
2019/01/18 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
2014庆六一活动方案
2014/03/02 职场文书
高中校园广播稿
2014/10/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
小学课改工作总结
2015/08/13 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python