纯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:rgba(255,255,255,.4);
}
.plane .fan .fan-wings .fan-a:before{
	right:0;
	width:55px;
	height:110px;
	border-radius:110px 0 0 110px;
}
.plane .fan .fan-wings .fan-b:before{
	right:0;
	height:55px;
	width:110px;
	border-radius:110px 110px 0 0;
}
.plane .fan .fan-wings .fan-c:before{
	left:100%;
	width:55px;
	height:110px;
	border-radius:0 110px 110px 0;
}
.plane .fan .fan-wings .fan-d:before{
	top:100%;
	width:110px;
	height:55px;
	border-radius:0 0 110px 110px;
}
.plane .cat{
	bottom:0;
	z-index:2;
	width:22px;
	right:35px;
	height:20px;
	position:absolute;
	background:#1c1c1c;
	-webkit-transform:translateX(0);
	        transform:translateX(0);
	border-radius:15px 15px 0 0;
	-webkit-animation:cat-move 10s infinite;
	        animation:cat-move 10s infinite;
}
.plane .cat:before{
	content:'';
	width:0;
	height:0;
	top:-5px;
	position:inherit;
	border:11px solid #1c1c1c;
	border-top:10px solid transparent;
}
.plane .cat .legs{
	bottom:0;
	height:20px;
	width:inherit;
	position:inherit;
}
.plane .cat .legs:before,
.plane .cat .legs:after{
	top:12px;
	width:5px;
	height:17px;
	background:#1c1c1c;
	border-bottom:4px solid #f6f7f7;
}
.plane .cat .legs:before{
	left:-5px;
	border-radius:6px 0 2px 2px;
}
.plane .cat .legs:after{
	right:-5px;
	border-radius:0 6px 2px 2px;
}

.plane .wheel{
	height:78px;
}
.plane .wheel .left,
.plane .wheel .right{
	bottom:0;
	width:10px;
	height:20px;
	border-radius:5px;
	position:absolute;
}
.plane .wheel .left{
	left:60px;
}
.plane .wheel .right{
	right:60px;
}
.plane .wheel .left:before,
.plane .wheel .right:after{
	top:-15px;
	width:78px;
	height:2px;
}
.plane .wheel .left:before{
	left:-5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.plane .wheel .right:after{
	right:-5px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
@-webkit-keyframes engine-sta.........完整代码请登录后点击上方下载按钮下载查看