首页
所有分类
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(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 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
德生9700DX(1) ATS-909X(1) 德生PL330(2) D1875(1) 山进(2) PHILIPS(3) SANGEAN(1) 飞利浦(2) D1835(1) L4X25T(1)
You might like
PHP连接access数据库
2008/03/27 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
javascript事件模型代码
2007/07/01 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
python解析xml文件实例分析
2015/05/27 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python drf各类组件的用法和作用
2021/01/12 Python
STAUD官方网站：洛杉矶独有的闲适风格
2019/04/11 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
企业统计员岗位职责
2013/12/13 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
路政管理求职信
2014/06/18 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
端午节活动总结报告
2015/02/11 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
中国古风插画师排行榜：夏达第一，第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫