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

纯css实现猫乘坐螺旋桨飞机动画效果

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看