利用CSS3实现炫酷的飞机起飞动画

2020-05-09 06:46: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;