首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 实现飘动的云朵动画

Posted in HTML / CSS onDecember 01, 2020

运行效果

CSS3 实现飘动的云朵动画

html

<head>
  <meta charset='UTF-8'>
  <title>CSS3 Cloud Animations By Montana Flynn</title>
</head>

<body>
  <div class="sky">
    <div class="moon"></div>
    <div class="clouds_two"></div>
    <div class="clouds_one"></div>
    <div class="clouds_three"></div>
  </div>
</body>

css

html, body {
  margin: 0;
  height: 100%
}

.sky {
  height: 480px;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: sky_background 50s ease-out infinite;
  -moz-animation: sky_background 50s ease-out infinite;
  -o-animation: sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.moon {
  background: url("http://i.imgur.com/wFXd68N.png");
  position: absolute;
  left: 0;
  height: 300%;
  width: 300%;
  -webkit-animation: moon 50s linear infinite;
  -moz-animation: moon 50s linear infinite;
  -o-animation: moon 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.clouds_one {
  background: url("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.clouds_two {
  background: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

.clouds_three {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

@-webkit-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

@-webkit-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}

@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

@-moz-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}

@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

以上就是CSS3 实现飘动的云朵动画的详细内容，更多关于CSS3 飘动的云的资料请关注三水点靠木其它相关文章！

CSS3 实现飘动的云朵动画

- Author -

Montana Flynn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 #HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 #HTML / CSS
CSS3 实现倒计时效果
Nov 25 #HTML / CSS
CSS3贝塞尔曲线示例：创建链接悬停动画效果
Nov 19 #HTML / CSS
CSS3实现菜单悬停效果
Nov 17 #HTML / CSS
方案(1080) 教学反思(909) 证明书(326) 事迹材料(636) 感言(394) 邀请函(127) 辞职信(98) 广播稿(323) 检讨书(456) 表扬信(62)
You might like
PHP 事件机制(2)
2011/03/23 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php集成开发环境详解
2019/09/24 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
EasyUI，点击开启编辑框，并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
Mac 安装 nodejs方法（图文详细步骤）
2017/10/30 NodeJs
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
LayUI表格批量删除方法
2018/08/15 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python 中的 else详解
2016/04/23 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python实现AES加密，解密的两种方法
2020/10/03 Python
python 下载文件的几种方法汇总
2021/01/06 Python
美国当红的名品折扣网：Gilt Groupe
2016/08/15 全球购物
新西兰最大的连锁超市：Countdown
2020/06/04 全球购物
车间班长岗位职责
2013/11/30 职场文书
安全生产投入制度
2014/01/29 职场文书
公司请假条范文
2014/04/11 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Django路由层如何获取正确的url
2021/07/15 Python