先来看看效果图

有点遗憾的是云朵不好画，用图片代替了

实例源码

复制代码代码如下:

Plane

*{margin:0;padding:0;}

body{

height: 700px;

background: rgb(42, 121, 146);

background: linear-gradient(to top right,rgba(209,228,234,1),rgb(42, 121, 146));

overflow: hidden;

font-family: Microsoft Yahei;

}

.sky{

width:100%;

height:100%;

position: absolute;

background: url("//img.jbzj.com/file_images/article/201609/2016917172009472.png") no-repeat;

-webkit-animation:cloud 40s linear infinite;

animation:cloud 40s linear infinite;

}

@keyframes cloud{

from{background-position:1800px -100px;}

to{background-position:-1200px -100px;}

}

.plane{

height:300px;

width:490px;

position:absolute;

bottom:-14px;

left:25%;

z-index: 3;

-webkit-animation: planeFly 12s linear;

animation: planeFly 12s linear;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.plane .frame,.plane .tube,.plane .tube::after,.plane .tube::before,.plane .frame::after,.plane .wrings-left,.plane .wrings-right,.plane .wrings-right::after,.plane .wrings-left::after,.plane .tail-left,.plane .tail-right,.plane .tail-top,.plane .tail-top::after{

background: #fff;

border:1px solid #000;

}

.plane .frame{

z-index:1;

height:60px;

width:405px;

position: absolute;

top:100px;

right:50px;

border-radius:120% 160% 50% 220%;

-webkit-transform:rotate(-5deg);

transform:rotate(-5deg);

}

.plane .afterbody{

}

.plane .frame::after{

content: "";

height: 56px;

width: 400px;

position: absolute;

top: 8px;

left: 25px;

border-radius: 120% 167% 113% 100%;

clip: rect(0px 410px 60px 370px);

}

.plane .frame::before{

content: "";

height: 30px;

width: 50px;

position: absolute;

top:5px;

right: -2px;

border-radius: 50% 50% 50% 50%;

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

border-right: 1px solid #000;

background: #fff;

clip: rect(16px 70px 40px 31px);

z-index: 1;

}

.plane .frame .windows{

position:absolute;

top:21px;

left:100px;

width:7px;

height: 12px;

background: #666;

box-shadow: 15px 0px 0px #666,30px 0px 0px #666,45px 0px 0px #666,75px 0px 0px #666,90px 0px 0px #666,105px 0px 0px #666,120px 0px 0px #666,135px 0px 0px #666,150px 0px 0px #666,165px 0px 0px #666,195px 0px 0px #666,210px 0px 0px #666,225px 0px 0px #666,240px 0px 0px #666;

-webkit-transform:rotate(1deg);

transform:rotate(1deg);

}

.plane .frame .door{

position:absolute;

top: 17px;

left: 75px;

width: 10px;

height: 14px;

border:1px solid #333;

}

.plane .brand{

position: absolute;

top:38px;

right:58px;

color:#ef7b57;

font-size: 13px;

font-weight: 600;

-webkit-transform:rotate(1deg);

transform:rotate(1deg);

}

.plane .frame .pilothouse{

position:absolute;

top:26px;

right:13px;

width:7px;

height:10px;

background: #666;

z-index: 5;

}

.plane .frame .pilothouse::after{

content: "";

position:absolute;

top:0px;

left:10px;

width:10px;

height:9px;

background: #666;

z-index: 5;

border-bottom-right-radius:100%;

}

.plane .tube{

width:40px;

height:20px;

border:1px solid #000;

position:absolute;

border-radius: 15% 0% 0% 25%;

border-left:none;

-webkit-transform:skewX(5deg);

transform:skewX(5deg);

}

.plane .tube::after{

content:"";

width:8px;

height:20px;

position: absolute;

top:-1px;

right:-5px;

border-radius: 5% 28% 47% 5%;

}

.plane .tube-a{

top:24px;

left:202px;

}

.plane .tube-b{

top:60px;

left:238px;

}

.plane .tube-c{

top:175px;

left:258px;

z-index: 3;

}

.plane .tube-d{

top:218px;

left:245px;

z-index: 3;

}

.plane .tube .cover{

width:26px;

height:8px;

background: #fff;

position: absolute;

border-top:1px solid #000;

border-right:1px solid #000;

border-radius: 0% 50% 0% 0%;

-webkit-transform:rotate(7deg);

transform:rotate(7deg);

left:0;

top:13px;

}

.plane .tube-a .cover,.plane .tube-b .cover{

width:34px;

height:14px;

border-right:none;

}

.plane .tube-c .cover{

left:1px;

}

.plane .wrings-left{

width:140px;

height:39px;

transform-origin: right top;

-webkit-transform:rotate(45deg) skewX(-43deg);

transform:rotate(45deg) skewX(-43deg);

border-top-left-radius:10%;

border-bottom-left-radius:10%;

/*border-right:none;*/

position:absolute;

top:105px;

left:155px;

}

.plane .wrings-left::after{

content:"";

width:147px;

height:30px;

position: absolute;

top:21px;

left:-2px;

-webkit-transform:rotate(10deg) skewX(10deg);

transform:rotate(10deg) skewX(10deg);

border-top:none;

border-radius:0% 0% 0% 10%;

}

.plane .wrings-right{

width:145px;

height:55px;

transform-origin: right top;

-webkit-transform:rotate(-72deg) skewX(23deg);

transform:rotate(-72deg) skewX(23deg);

border-top-left-radius:10%;

border-bottom-left-radius:10%;

border-bottom-right-radius:5%;

position:absolute;

top:145px;

left:97px;

z-index: 3;

}

.plane .wrings-right::after{

content:"";

width:147px;

height:40px;

position: absolute;

top:-12px;

left:-2px;

-webkit-transform:rotate(-10deg) skewX(-10deg);

transform:rotate(-10deg) skewX(-10deg);

border-bottom:none;

border-radius:10% 5% 0% 0%;

}

.plane .wrings-left p,.plane .wrings-left p::after,.plane .wrings-right p,.plane .wrings-right p::after{

height: 8px;

position: absolute;

border: 1px solid #aaa;

}

.plane .wrings-left p{

width: 50px;

top: 47px;

left: 70px;

-webkit-transform:rotate(10deg) skewX(10deg);

transform:rotate(10deg) skewX(10deg);

z-index: 1;

border-bottom: none;

}

.plane .wrings-left p::after{

content: "";

width: 46px;

top: 0px;

left: -58px;

border-bottom: none;

}

.plane .wrings-right p{

width: 50px;

top: -16px;

left: 76px;

-webkit-transform: rotate(-10deg) skewX(-10deg);

transform: rotate(-10deg) skewX(-10deg);

z-index: 1;

border-top:none;

}

.plane .wrings-right p::after{

content:"";

width: 49px;

top: 0px;

left: -60px;

border-top:none;

}

.plane .tail-left,.plane .tail-right{

transform-origin: right top;

border-top-left-radius:10%;

border-bottom-left-radius:10%;

position:absolute;

}

.plane .tail-left{

width:50px;

height:35px;

-webkit-transform:rotate(45deg) skewX(-43deg);

transform:rotate(45deg) skewX(-43deg);

border-right:none;

top:143px;

left:42px;

}

.plane .tail-right{

width:45px;

height:30px;

-webkit-transform:rotate(-75deg) skewX(20deg);

transform:rotate(-75deg) skewX(20deg);

border-bottom-right-radius:5%;

top:138px;

left:-13px;

z-index: 4;

}

.plane .tail-top{

width: 60px;

height: 25px;

-webkit-transform: rotate(50deg) skewX(-30deg);

transform: rotate(50deg) skewX(-30deg);

border-top-left-radius: 20%;

border-bottom-left-radius: 20%;

position: absolute;

top: 96px;

left: 12px;

border-bottom: none;

z-index:3;

}

.plane .tail-top::before{

content: "";

width: 60px;

height:20px;

position: absolute;

top: 9px;

left: 1px;

border-bottom:1px solid #000;

border-right:1px solid #000;

-webkit-transform: rotate(13deg) skewX(13deg);

transform: rotate(13deg) skewX(13deg);

background:#fff;

}

.plane .tail-top::after{

content: "";

width: 50px;

height: 40px;

border-width:2px;

width: 15px;

height: 41px;

border-width: 2px;

border-top-right-radius: 50%;

border-bottom-right-radius: 28%;

-webkit-transform: skewX(24deg);

transform: skewX(24deg);

position: absolute;

top: -42px;

left: 38px;

border-right: 0;

border-top: 0;

border-left: 0;

background: transparent;

}

.plane .tail-top .paint,.plane .tail-top .paint::before{

position: absolute;

top: 0px;

background:rgba(197,35,7,.9);

}

.plane .tail-top .paint{

width: 67px;

height: 23px;

left: 0px;

z-index: 5;

border-radius: 15% 0% 0% 10%;

}

.plane .tail-top .paint::before{

content: "";

width: 31px;

height: 37px;

left: 64px;

border-radius: 0% 0% 400% 0%;

-webkit-transform: rotate(8deg) skewY(-8deg);

transform: rotate(8deg) skewY(-8deg);

}

.plane .tail-top .paint p{

color:#fff;

padding-left:13px;

padding-top:1px;

font-size:16px;

}

.earth{

width:100%;

height: 250px;

position:absolute;

left:0;

bottom:0px;

-webkit-animation: earthDown 12s 3s linear;

animation: earthDown 12s 3s linear;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.earth .street {

background:#7a7a7a;

height:130px;

width:102%;

position:absolute;

bottom:65px;

box-shadow:0 1px 16px rgba(111, 35, 51, 0.4) inset;

}

.earth .street:after {

content:"";

display:block;

position:absolute;

width:100%;

height:0px;

bottom:0px;

border-bottom:3px solid #72625a;

z-index:1;

}

.earth .street-stripe {

background:#d4d4d4;

height:8px;

width:100px;

position:absolute;

bottom:65px;

left:-1000px;

border-radius:2px;

box-shadow:200px 0 0 #d4d4d4, 400px 0 0 #d4d4d4 , 600px 0 0 #d4d4d4 , 800px 0 0 #d4d4d4 , 1000px 0 0 #d4d4d4 , 1200px 0 0 #d4d4d4 , 1400px 0 0 #d4d4d4 , 1600px 0 0 #d4d4d4 , 1800px 0 0 #d4d4d4 , 2000px 0 0 #d4d4d4, 2200px 0 0 #d4d4d4, 2400px 0 0 #d4d4d4, 2600px 0 0 #d4d4d4;

-webkit-animation: streetMove linear 8s infinite;

animation: streetMove linear 8s infinite;

}

.earth .hill {

position: absolute;

bottom: 100px;

right: 0;

width: 100%;

height: 250px;

z-index:-1;

}

.earth .hill:after {

content: '';

position: absolute;

bottom: -100px;

right:0px;

width: 100%;

height:30%;

background-color: #94c943;

box-shadow:0 0 25px #cbf191 inset;

}

.earth .hill:before {

background-color: #93cc3a;

border-top-left-radius:90%;

border-top-right-radius: 100%;

bottom: -25px;

content: "";

height:60%;

left:-50%;

position: absolute;

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

width: 150%;

box-shadow:0 0 5px #cbf191;

-webkit-animation: hillMove 8s linear;

animation: hillMove 8s linear;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.plane .base{

width:24px;

height:7px;

background: #333;

position: absolute;

border-radius: 0% 0% 40% 40%;

-webkit-animation:tyreOut 3s 10s linear;

animation:tyreOut 3s 10s linear;

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.plane .base::before{

content:"";

display: block;

width:4px;

height:13px;

position: absolute;

top:0;

left:10px;

background: #333;

}

.plane .base-back{

top:160px;

left:145px;

}

.plane .base-front{

top:147px;

right:104px;

-webkit-transform:rotate(-5deg);

transform:rotate(-5deg);

}

.plane .base .tyre{

width: 20px;

height: 20px;

border-radius: 50%;

background: #3f3f40;

position: absolute;

top: 11px;

}

.plane .base .tyre:before {

content:'';

width: 10px;

height: 10px;

border-radius: 50%;

background: #bdc2bd;

position: absolute;

top: 5px;

left: 5px;

}

.plane .base .tyre-back{

left: 2px;

-webkit-animation:tyreRotate 5s ease-out;

animation:tyreRotate 5s ease-out;

}

.plane .base .tyre-front{

right:2px;

-webkit-animation:tyreRotate 4s ease-out;

animation:tyreRotate 4s ease-out;

}

.plane .base .tyre .gap{

background: #3f3f40;

width: 2px;

height: 4px;

position: absolute;

left: 9px;

top: 5px;

box-shadow: 0 6px 0 #3f3f40;

}

.plane .base .tyre .gap:before {

content:'';

display:block;

width:2px;

height:4px;

position:absolute;

top:3px;

left:-3px;

background:#3f3f40;

box-shadow:0 6px 0 #3f3f40;

-webkit-transform:rotate(-90deg);

transform:rotate(-90deg);

}

@keyframes tyreRotate{

from{-webkit-transform:rotate(-5400deg);}

to{-webkit-transform:rotate(0deg);}

}

@keyframes hillMove{

0%{left:-200;}

100%{left:-1200px;}

}

@keyframes streetMove{

0%{left:0;}

100%{left:-1000px;}

}

@keyframes planeFly{

0%{left:0;bottom:0;transform:rotate(0deg);}

50%{left:15%;bottom:0;transform:rotate(-3deg);}

60%{left:18%;bottom:5%;transform:rotate(-5deg);}

100%{left:30%;bottom:35%;transform:rotate(0deg);}

}

@keyframes earthDown{

0%{bottom:0;}

25%{bottom:-30px;}

50%{bottom:-100px;}

100%{bottom:-300px;}

}

@keyframes tyreOut{

to{top:110px;}

}

AIRBUS

A380

总结

以上就是这篇文章的全部内容了，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

css2d炫酷效果,利用CSS3实现炫酷的飞机起飞动画相关推荐

  1. css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效

    特效描述:利用CSS3实现 3D滑块 进度条拖动 动画特效.利用CSS3实现3D滑块进度条拖动动画特效 代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...

  2. css 动画 飞机,利用CSS3实现炫酷的飞机起飞的动画

    这篇文章给大家演示如何只利用CSS3就能实现飞机起飞的动画,实现后的效果很赞,有需要的朋友可以参考借鉴. 有点遗憾的是云朵不好画,用图片代替了 实例源码 Plane *{margin:0;paddin ...

  3. html图片爆炸效果,利用CSS3制作3D图片爆炸效果

    利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环 首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...

  4. css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效

    特效描述:利用CSS3实现 3D倾斜 视差图片 展示特效.利用CSS3实现3D倾斜视差图片展示特效 代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...

  5. 利用CSS3的animation step属性实现wifi动画（结尾有彩蛋）

    之前攒的满满的SVG+CSS3做动画的技能一直未能放个大招,理由很简单,因为本身从事行业的性质,软件里不能出现劳什子动画这等花里胡哨的东西,哦,不不,叫隐喻行为引导的趣味化.用canvas实现了一个科 ...

  6. js中select下拉框重置_如何利用CSS3制作炫酷的下拉框

    很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...

  7. php loading效果,利用CSS3打造十种Loading效果

    第1种效果: 代码如下: html css.loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loadi ...

  8. html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果

    本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...

  9. css怎么设置表格斑马纹效果,利用CSS3选择器实现表格的斑马纹

    要用到的Css3选择器 element:nth-child(number){ } 选择器匹配属于其父元素的第 number 个子元素 参数 Numberodd 奇数 even 偶数 完整demo: 测 ...

最新文章

  1. 统计简单学_基本概念
  2. VMware 虚拟机的虚拟磁盘编程知识点扫盲之二
  3. 模型预测控制c语言程序_基于数据驱动的模型预测控制
  4. XSS 前端防火墙 —— 天衣无缝的防护
  5. 抖音云控_抖音云控/快手云控：引领5G电商短视频新潮流
  6. PTA--Reversing Linked List
  7. python数据库操作——Oracle超详细安装过程
  8. 【小程序项目分享】多功能抽签分组系统
  9. spyder python下载_Spyder Python软件-Spyder Python下载-最火手机站
  10. 数字证书是什么原理，有什么作用？
  11. 【广东大学生网络攻防大赛-WriteUp（非官方）】Misc | 复合
  12. android 微信 amr转mp3格式,微信amr格式转换器使用教程 如何批量转换微信amr为mp3音频格式文件...
  13. 三轮全向轮底盘SLAM挖坑系列-简介
  14. 51单片机系列——定时/计数器
  15. 全国首款二级分销小程序上线
  16. 会php学java入门要多久_php自学需要多久
  17. ps制作台式计算机图标,PS软件制作计算机图标教程
  18. 适合小白的SQL Server学习笔记
  19. 火狐怎么导入旧的火狐数据_Firefox很棒
  20. 黑马程序员-黑马程序员训练营基础测试

热门文章

  1. Windows::ServicingAPI::CCDF
  2. Java高级：java文档生成器命令
  3. 基于的单片机的无线遥控器设计
  4. python3.7 安装pip3_Centos7 安装python3、pip3、ipython3
  5. 输入分子式，计算相对分子质量
  6. 重磅！南京java培训机构推荐
  7. 好程序员：Java培训班包就业靠谱吗?Java培训机构怎么选？
  8. 支付FM监控APP配置
  9. Latex中插入罗马数字
  10. QGIS创建专题地图