首页
所有分类
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制作3D样式按钮实现代码
Mar 18 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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
对撞机(1) 太空(1) DNS服务器(2) 磁盘分区(1) 粒子对撞机(1) 夸克(1) FTP服务器(1) 国际空间站(1) 界面设计(1) .NET Framework(2)
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
Angular 理解module和injector，即依赖注入
2016/09/07 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
javascript数据类型详解
2017/02/07 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
什么是python的自省
2020/06/21 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
殡葬服务心得体会
2014/09/11 职场文书
争先创优心得体会
2014/09/12 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
初中思想品德教学反思
2016/02/24 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python