海中航行的船效果
代码语言: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-top-layer .bottom:before, .boat .boat-top-layer .bottom:after{ background:#fff; } .boat .boat-top-layer .bottom:before{ left:8px; top:-30px; width:5px; height:35px; -webkit-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-top-layer .bottom:after{ bottom:0; left:30px; width:2px; height:85px; } /* middle - top */ .boat .boat-mid-layer .top{ left:60px; width:70px; height:20px; position:relative; background:#222e28; border-top:5px solid #fff; border-right:5px solid #fff; } .boat .boat-mid-layer .top:before{ top:-5px; left:-10px; width:18px; height:inherit; background:inherit; border-top:inherit; border-right:inherit; border-left:5px solid #fff; -webkit-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-mid-layer .top:after{ top:-5px; width:5px; height:5px; right:-10px; background:#fff; border-radius:0 3px 3px 0; } /* middle - bottom */ .boat .boat-mid-layer .bottom{ left:25px; width:105px; height:12px; background:#fff; position:relative; } .boat .boat-mid-layer .bottom:before{ left:-5px; width:10px; height:inherit; background:inherit; border-radius:3px 0 0 0; -webkit-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-mid-layer .bottom:after{ top:3px; right:5px; height:5px; width:20px; background:#d0e2d7; } /* bottom - top */ .boat .boat-bot-layer .top{ left:-10px; height:5px; width:180px; position:relative; background:#688b77; border-radius:5px 5px 0 0; } .boat .boat-bot-layer .top:before, .boat .boat-bot-layer .top:after{ width:5px; height:5px; bottom:100%; background:#222e28; border-radius:2px 2px 0 0; } .boat .boat-bot-layer .top:before{ left:10px; } .boat .boat-bot-layer .top:after{ right:25px; } /* bottom - bottom */ .boat .boat-bot-layer .bottom{ width:180px; height:25px; position:relative; border-radius:2px; background:#222e28; } .boat .boat-bot-layer .bottom:before{ left:-15px; width:25px; he.........完整代码请登录后点击上方下载按钮下载查看
网友评论0