这篇文章给大家演示如何只利用CSS3就能实现飞机起飞的动画，实现后的效果很赞，有需要的朋友可以参考借鉴。

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

实例源码

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("//files.jb51.net/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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

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

  1. css2d炫酷效果,利用CSS3实现炫酷的飞机起飞动画

    先来看看效果图 有点遗憾的是云朵不好画,用图片代替了 实例源码 复制代码代码如下: Plane *{margin:0;padding:0;} body{ height: 700px; backgrou ...

  2. html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效

    css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...

  3. html飞机动画,基于纯CSS3纸飞机炫酷动画特效

    简要教程 Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaw ...

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

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

  5. 【CSS3】CSS3动画——我离前端的炫酷又近了一步

    [CSS3]CSS3动画--我离前端的炫酷又近了一步 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除! ...

  6. html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

    插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

  7. 炫酷html动画,纯CSS3一个炫酷动画

    纯CSS3一个炫酷动画 通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个 围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...

  8. css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

    插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

  9. jQuery和CSS3炫酷滚动页面内容元素动画特效

    jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...

最新文章

  1. Google Colab 免费GPU服务器使用教程 挂载云端硬盘
  2. 沉浸式小说App获得200万美元投资
  3. C#基础-类成员（Day7）
  4. Python统计在一个队列中有多少个正数，多少个负数
  5. 【Matlab】方差是偏离均值的程度，那偏离中位数的程度怎么算呢？
  6. 【双11狂欢背后】微服务注册中心如何承载大型系统的千万级访问？
  7. 计算机两年发展,计算机发展历史
  8. linux 测试工具
  9. websocket 初识
  10. 电脑更新系统时间显示rpc服务器不可用,win7系统时间同步出错RPC服务器不可用的解决方法...
  11. 用几行代码恶搞别人的电脑
  12. 数据结构视频教程 -《[中山大学]算法与数据结构（C语言版）[胡青主讲]》
  13. 海康8700视频调用
  14. android正确释放webview,解决Android WebView内存释放
  15. [2020首届祥云杯]带音乐家
  16. 利用SUS实现自动补丁管理
  17. 欢迎来到地狱（隐写术）
  18. python setup.py bdist_wheel生成wheel文件，示例：安装webrtcvad
  19. 大河奔流的精神 ——俞敏洪
  20. Python3 （基础练习） 一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？

热门文章

  1. python 继承（史上最详细版本）
  2. Facebook表态不放弃中国市场，还在跟政府谈判
  3. Node-RED教程（二）：Node-RED的面板的操作
  4. 无线433判断遥控器按键弹起
  5. python量化策略——Fama-French三因子模型
  6. python敲七游戏代码_敲七游戏 （C语言代码）
  7. 史上最强 -- Java类加载器的原理及应用
  8. 求一个范围内的完数 --＞ 6=1+2+3(因子和)
  9. 仿王者荣耀对战资料选项中的【雷达网图展示详细数据】
  10. 编辑一个随机4位数的验证码