首页
所有分类
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盒子模型详解
Apr 24 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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) AM(1) 电路(15) 频偏(1) 鉴频器(1) 实习报告(1) 发烧友(1) 探测器(1) 灵敏度(1) 频率(1)
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
Cakephp 执行主要流程
2010/03/24 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
理解JSON：3分钟课程
2011/10/28 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
QRCode.js：基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python如何发布程序的详细教程
2018/10/09 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
MANGO官方网站：西班牙芒果服装品牌
2017/01/15 全球购物
莫斯科制造商的廉价皮大衣：Fursk
2020/06/09 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
神龙架导游词
2015/02/11 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers