首页
所有分类
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 按钮边框动画的实现
Nov 12 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 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
Xception(1) tensorflow(2) 字符串(2) Inception(2) jenkins(1) Seaborn(1) yolo3(1) UV(1) 进程假死(1) 逆序(1)
You might like
PHP实现下载功能的代码
2012/09/29 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
汤米巴哈马官方网站：Tommy Bahama
2017/05/13 全球购物
全球最大的户外用品零售商之一：The House
2018/06/12 全球购物
德国药房apodiscounter中文官网：德国排名前三的网上药店
2019/06/03 全球购物
西班牙在线宠物食品和配件商店：bitiba
2019/10/11 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
调解协议书
2014/04/16 职场文书
房屋产权证明书
2014/10/15 职场文书
解除处分决定书
2015/06/25 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
python 多态 协议 鸭子类型详解
2021/11/27 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL