首页
所有分类
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 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
代理(2) canvas(2) SQL注入(2) 图片模糊(1) flex(1) 外键(1) 选择器(1) GNN(1) #{}(1) flex-shrink(1)
You might like
smarty实例教程
2006/11/19 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
两种JavaScript的AES加密方式（可与Java相互加解密）
2016/08/02 Javascript
AngularJS 单元测试（二）详解
2016/09/21 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
利用JavaScript对中文（汉字）进行排序实例详解
2017/06/18 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
一文了解Python并发编程的工程实现方法
2019/05/31 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python如何将模块打包并发布
2020/08/30 Python
python开发入门——set的使用
2020/09/03 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
施华洛世奇中国官网：SWAROVSKI中国
2020/06/16 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
应届生找工作求职信
2014/06/24 职场文书
委托证明范本
2014/11/25 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书