首页
所有分类
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 实现的无缝轮播功能代码
Sep 25 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果（粒子生成文字）
Feb 01 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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
capture(1) MybatisPlus(2) self(1) JSON(10) tabBar(1) uniapp(4) element-china-area-data(1) SpringBoot(22) Normal From(1) Flutter(2)
You might like
MySQL授权问题总结
2007/05/06 PHP
php header()函数使用说明
2008/07/10 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
动态刷新 dorado树的js代码
2009/06/12 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
介绍Python中的__future__模块
2015/04/27 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
详解Python的数据库操作（pymysql）
2019/04/04 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python yield和Generator函数用法详解
2020/02/10 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
如何理解委托
2012/01/06 面试题
美国探亲签证邀请信
2014/02/05 职场文书
公司年会主持词
2014/03/22 职场文书
软件项目开发计划书
2014/05/01 职场文书
爬山的活动方案
2014/08/16 职场文书
单位在职证明书
2014/09/11 职场文书
2014年大学生职业规划书：未来不是梦，只要勇敢冲！
2014/09/22 职场文书
2016年记者节感言
2015/12/08 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers