海中航行的船效果-html代码-BFW代码库

海中航行的船效果

代码语言：html

所属分类：动画

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


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

<title> Animated Boatin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
    body{
	margin:0;
	color:#444;
	background:#8ab7a0;
	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}

.boat{
	top:50%;
	left:50%;
	margin-top:-75px;
	position:absolute;
	margin-left:-105px;
}
.boat .wrap{
	margin:auto;
	width:210px;
	height:150px;
	overflow:hidden;
	position:relative;
	padding:50px 0 0 25px;
}
.boat .main{
	bottom:-3px;
	position:relative;
	-webkit-animation:boat-start 1s infinite;
	animation:boat-start 1s infinite;
}
.boat .boat-top-layer .top:before,
.boat .boat-top-layer .top:after,
.boat .boat-top-layer .top .pole:before,
.boat .boat-top-layer .top .pole:after,
.boat .boat-top-layer .top .help:before,
.boat .boat-top-layer .top .help:after,
.boat .boat-top-layer .top .help span:before,
.boat .boat-top-layer .top .help span:after,
.boat .boat-top-layer .bottom:before,
.boat .boat-top-layer .bottom:after,
.boat .boat-mid-layer .top:before,
.boat .boat-mid-layer .top:after,
.boat .boat-mid-layer .bottom:before,
.boat .boat-mid-layer .bottom:after,
.boat .boat-bot-layer .top:before,
.boat .boat-bot-layer .top:after,
.boat .boat-bot-layer .bottom:before,
.boat .boat-bot-layer .bottom:after,
.boat .water .drop:before,
.boat .water .drop:after{
	content:'';
	position:absolute;
}

/* top - top */
.boat .boat-top-layer .top{
	left:70px;
	width:55px;
	height:30px;
	position:relative;
	border:2px solid #fff;
}
.boat .boat-top-layer .top:before,
.boat .boat-top-layer .top:after{
	background:#fff;
}
.boat .bo.........完整代码请登录后点击上方下载按钮下载查看