海中航行的船效果-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.........完整代码请登录后点击上方下载按钮下载查看