首页
所有分类
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属性box-sizing使用指南
Dec 09 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5边玩边学（3）像素和颜色
Sep 21 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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
Git(3) webpack(1) OpenFeign(1) cudn(1) 热力图(1) RTX 3050 ti(1) callback(1) swing(1) SandBox(1) cudnn(1)
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[11:27]《一刀刀一天》之DOTA全时刻20：TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python之import机制详解
2014/07/03 Python
Python中关键字is与==的区别简述
2014/07/31 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
在python3中实现更新界面
2020/02/21 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
顶撞领导检讨书
2014/01/29 职场文书
运动会的口号
2014/06/09 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
实例详解Python的进程,线程和协程
2022/03/13 Python