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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery实现动态画圆
2014/12/04 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
详解python中__name__的意义以及作用
2019/08/07 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
家长给小学生的评语
2014/01/30 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
学生期末评语大全
2014/04/30 职场文书
经典毕业生求职信
2014/07/12 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
自我检讨书怎么写
2015/05/07 职场文书
项目备案申请报告
2015/05/15 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
如何利用React实现图片识别App
2022/02/18 Javascript