海中航行的船效果-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 .boat-top-layer .top:before{
        top:50%;
        left:-2px;
        height:2px;
        width:inherit;
        margin-top:-1px;
}
.boat .boat-top-layer .top:after{
        top:-30px;
        width:2px;
        right:-2px;
        height:35px;
}
.boat .boat-top-layer .top .pole{
        width:2px;
        left:-2px;
        z-index:1;
        height:50px;
        bottom:-8px;
        background:#fff;
        position:absolute;
}
.boat .boat-top-layer .top .pole:before,
.boat .boat-top-layer .top .pole:after{
        position:absolute;
        background:inherit
}
.boat .boat-top-layer .top .pole:before{
        top:-5px;
        left:50%;
        width:15px;
        height:8px;
        border-radius:4px;
        margin-left:-7.5px;
}
.boat .boat-top-layer .top .pole:after{
        bottom:0;
        left:30px;
        width:2px;
        height:35px;
}
.boat .boat-top-layer .top .help{
        z-index:1;
        width:30px;
        height:30px;
        margin-top:-2px;
        margin-left:-1px;
        position:relative;
        border-radius:50%;
        border:8px solid #f04850;
}
.boat .boat-top-layer .top .help:before,
.boat .boat-top-layer .top .help:after{
        top:50%;
        left:50%;
        position:absolute;
        background:rgba(0,0,0,.3);
}
.boat .boat-top-layer .top .help:before{
        height:2px;
        width:inherit;
        margin-top:-1px;
        margin-left:-15px;
}
.boat .boat-top-layer .top .help:after{
        width:2px;
        height:inherit;
        margin-top:-15px;
        margin-left:-1px;
}
.boat .boat-top-layer .top .help span{
        top:-2px;
        width:14px;
        height:14px;
        overflow:hidden;
        border-radius:50%;
        position:relative;
        display:inline-block;
}
.boat .boat-top-layer .top .help span:before,
.boat .boat-top-layer .top .help span:after{
        top:50%;
        left:50%;
        z-index:1;
        background:#fff;
        position:absolute;
}
.boat .boat-top-layer .top .help span:before{
        width:2px;
        height:inherit;
        margin-top:-7px;
        margin-left:-1px;
}
.boat .boat-top-layer .top .help span:after{
        height:2px;
        width:inherit;
        margin-top:-1px;
        margin-left:-7px;
}

/* top - bottom */
.boat .boat-top-layer .bottom{
        left:55px;
        height:5px;
        width:75px;
        position:relative;
        background:#688b77;
        border-radius:5px 3px 0 0;
}
.boat .boat-t.........完整代码请登录后点击上方下载按钮下载查看