先来看看效果图
有点遗憾的是云朵不好画，用图片代替了
实例源码
复制代码代码如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Plane</title>
<style type=”text/css”>
*{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.Vevb.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;}</p>
<p> }
.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;</p>
<p> }
.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;
新闻热点
疑难解答
