纯css实现猫乘坐螺旋桨飞机动画效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现猫乘坐螺旋桨飞机动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
        margin:0;
        color:#444;
        background:#58d0fe;
        font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.plane .fan,
.plane .wheel .left,
.plane .wheel .right,
.plane .wings:before,
.plane .wings:after,
.plane .wheel .left:before,
.plane .wheel .right:after{
        background:#000;
}
.cloud .line-b:before,
.cloud .line-b:after,
.cloud .line-d:before,
.cloud .line-d:after,
.plane .wings:before,
.plane .wings:after,
.plane .cat .legs:before,
.plane .cat .legs:after,
.plane .wheel .left:before,
.plane .wheel .right:after,
.plane .fan .fan-wings .fan-a:before,
.plane .fan .fan-wings .fan-b:before,
.plane .fan .fan-wings .fan-c:before,
.plane .fan .fan-wings .fan-d:before{
        content:'';
        position:absolute;
}

.cloud{
        width:120px;
        height:50px;
        overflow:hidden;
        position:fixed;
}
.cloud-a{
        top:15%;
        right:15%;
        -webkit-animation:cloud 3s infinite;
                animation:cloud 3s infinite;
}
.cloud-b{
        left:15%;
        bottom:15%;
        -webkit-animation:cloud 5s infinite;
                animation:cloud 5s infinite;
}
.cloud .line-a,
.cloud .line-b,
.cloud .line-c,
.cloud .line-d,
.cloud .line-e{
        height:10px;
        width:100%;
        position:relative;
        border-radius:5px;
        background:#79dbff;
}
.cloud .line-b:before,
.cloud .line-b:after,
.cloud .line-d:before,
.cloud .line-d:after{
        height:inherit;
        width:inherit;
        background:#58d0fe;
        border-radius:inherit;
}
.cloud .line-a,
.cloud .line-e{
        width:60px;
}
.cloud .line-a{
        left:20px;
}
.cloud .line-e{
        left:45px;
}
.cloud .line-b:before{
        top:0;
        left:-80px;
}
.cloud .line-b:after{
        top:0;
        right:-55px;
}
.cloud .line-d:before{
        top:0;
        left:-55px;
}
.cloud .line-d:after{
        top:0;
        right:-80px;
}

.plane{
        z-index:5;
        width:275px;
        height:130px;
        position:relative;
        margin:100px auto 0;
        -webkit-animation:plane-move 10s infinite;
                animation:plane-move 10s infinite;
        -webkit-animation-fill-mode:backwards;
                animation-fill-mode:backwards;
}

.plane .wings{
        height:52px;
        position:relative;
}
.plane .wings:before,
.plane .wings:after{
        height:5px;
        width:100%;
        border-radius:3px;
}
.plane .wings:before{
        top:0;
}
.plane .wings:after{
        bottom:0;
        height:4px;
}


.plane .fan{
        left:50%;
        z-index:1;
        width:50px;
        height:50px;
        bottom:-25px;
        border-radius:50%;
        margin-left:-25px;
        position:absolute;
}
.plane .fan .fan-wings{
        top:50%;
        left:50%;
        width:110px;
        height:110px;
        overflow:hidden;
        margin-top:-55px;
        position:absolute;
        margin-left:-55px;
        border-radius:50%;
}
.plane .fan .fan-wings .fan-a,
.plane .fan .fan-wings .fan-b,
.plane .fan .fan-wings .fan-c,
.plane .fan .fan-wings .fan-d{
        width:inherit;
        height:inherit;
        position:absolute;
        -webkit-animation:engine-start 1s infinite;
                animation:engine-start 1s infinite;
}
.plane .fan .fan-wings .fan-a{
        -webkit-animation-duration:.2s;
                animation-duration:.2s;
}
.plane .fan .fan-wings .fan-b{
        -webkit-animation-duration:.4s;
                animation-duration:.4s;
}
.
plane .fan .fan-wings .fan-c{
        -webkit-animation-duration:.4s;
                animation-duration:.4s;
}
.plane .fan .fan-wings .fan-d{
        -webkit-animation-duration:.2s;
                animation-duration:.2s;
}
.plane .fan .fan-wings .fan-a:before,
.plane .fan .fan-wings .fan-b:before,
.plane .fan .fan-wings .fan-c:before,
.plane .fan .fan-wings .fan-d:before{
        top:50%;
        left:50%;
        height:55px;
        width:110px;
        margin-top:-55px;
        margin-left:-55px;
        border-radius:110px 110px 0 0;
        background:rgb.........完整代码请登录后点击上方下载按钮下载查看