css3蒲公英飘动效果_CSS3 实现飘动的云朵动画
运行效果
html
CSS3 Cloud Animations By Montana Flynn
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蒲公英飘动效果_CSS3 实现飘动的云朵动画相关推荐
- css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星 先看效果: 下面我们利用CSS3的animation写出这样的动画来,要点就是: 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV,首先将他们大小铺满整个窗口 ...
- css3蒲公英飘动效果_css3 云朵飘动效果动画
先贴代码: css部分: @-webkit-keyframes fadeIn { 0% { opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/ } 10% ...
- html5 云朵飘动效果,canvas作图飘动的云朵
canvas绘制飘动的云朵 /*CSS代码片段*/ html,body{ background:#049ec4; background-repeat:repeat-y; margin:0; heigh ...
- css3 呼吸的莲花_CSS3实现莲花绽放的动画效果
这篇文章我们来讲一下在网站建设中,CSS3实现莲花绽放的动画效果.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 先来看效果: 这效果看起来挺炫,但原理并不复杂,能实现一片花 ...
- html5 云朵飘动效果,使用HTML5/Canvas制作云朵（烟雾）动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function(main) { main(this, document, jQuery, undefin ...
- css3蒲公英飘动效果_纯CSS3逼真的气球漂浮动画特效
这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效.这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果. 制作方法 HTML结构 ...
- html5 云朵飘动效果,CSS3如何实现飘动的云朵动画 CSS3实现飘动的云朵动画代码
css3如何实现飘动的云朵动画?本篇文章小编给大家分享一下CSS3实现飘动的云朵动画代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 运行效果 ht ...
- OpenGL（十九）——Qt OpenGL波动纹理(旗子的飘动效果)
OpenGL(十九)--Qt OpenGL波动纹理(旗子的飘动效果) 一.场景 在日常的项目中,我们经常会实现波动的一些纹理效果,比如飘动的旗子,水的波纹,地图上某一点的波浪圈圈等...,本篇介绍波动 ...
- html飘羽毛效果,HTML5实现的柳叶飘动效果
HTML5实现的柳叶飘动效果_网页代码站(www.webdm.cn) .qmg_leaf_div{width:500px;height:200px;overflow:hidden;} .qmg_lea ...
最新文章
- openstack对比其他有什么优点
- JavaScript内存优化
- [Windows驱动开发]（二）基础知识——数据结构
- 约瑟夫环递推公式的由来（约瑟夫环公式法）
- 最终的动画函数封装（2）
- 流畅和稳定的API的Lambda
- java中如何将数字转换成字符串（int转换为string）
- pytorch torch.eye
- 文字输入效率神器：输入法辅助工具 KeyboardHolder
- VUE3 Composition API详解
- SNK，作为程序后缀的时候，是.net中的强密匙加密文件
- 综合行政执法改革依据
- Android reboot那点事儿
- 快速学习-Saturn作业编排
- 安全合规/法案--31--《数据安全法》原文及解读
- 机器学习理论 之 经验风险最小化（Empirical Risk Minimization）
- excel如何用超链接直接打开文件
- 使用RocketMQ进行银行转账
- LeaRun .Net Core/Java工作流引擎，分离式前端，升级Vue
- 如何低成本减少企业知识流失？天翎知识文档系统+群晖NAS值得一试