以下是 纯CSS3实现轮船和飞机动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>纯CSS3实现轮船和飞机动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/ship.css">
</head>
<body>
<div class="htmleaf-demo center">
<a href="index.html" class="current">ship</a>
<a href="index2.html">plane</a>
</div>
<div class="boat">
<div class="wrap">
<div class="main">
<div class="boat-top-layer">
<div class="top">
<div class="pole"></div>
<div class="help"><span></span></div>
</div>
<div class="bottom"></div>
</div>
<div class="boat-mid-layer">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="boat-bot-layer">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="water">
<div class="drops clearfix drops-1">
<span class="drop drop-a"></span>
<span class="drop drop-b"></span>
<span class="drop drop-c"></span>
<span class="drop drop-d"></span>
<span class="drop drop-e"></span>
<span class="drop drop-f"></span>
<span class="drop drop-g"></span>
<span class="drop drop-h"></span>
</div>
<div class="drops clearfix drops-2">
<span class="drop drop-a"></span>
<span class="drop drop-b"></span>
<span class="drop drop-c"></span>
<span class="drop drop-d"></span>
<span class="drop drop-e"></span>
<span class="drop drop-f"></span>
<span class="drop drop-g"></span>
<span class="drop drop-h"></span>
</div>
</div>
</div>
</body>
</html>
HTML代码(index2.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>纯CSS3实现轮船和飞机动画特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/plane.css">
</head>
<body>
<div class="htmleaf-demo center">
<a href="index.html">ship</a>
<a href="index2.html" class="current">plane</a>
</div>
<div class="cloud cloud-a">
<div class="line-a"></div>
<div class="line-b"></div>
<div class="line-c"></div>
<div class="line-d"></div>
<div class="line-e"></div>
</div>
<div class="plane">
<div class="wings">
<div class="fan">
<div class="fan-wings">
<div class="fan-a"></div>
<div class="fan-b"></div>
<div class="fan-c"></div>
<div class="fan-d"></div>
</div>
</div>
<div class="cat">
<div class="legs"></div>
</div>
</div>
<div class="wheel">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="cloud cloud-b">
<div class="line-a"></div>
<div class="line-b"></div>
<div class="line-c"></div>
<div class="line-d"></div>
<div class="line-e"></div>
</div>
</body>
</html>
CSS代码(default.css):
body,html{padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.center{text-align:center;}
/*nav*/
.htmleaf-demo a{color:#fff;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
CSS代码(normalize.css):
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(ship.css):
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;-moz-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);-moz-transform:skewX(-25deg);-ms-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);-moz-transform:skewX(-25deg);-ms-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);-moz-transform:skewX(-25deg);-ms-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;height:25px;background:inherit;border-radius:inherit;-webkit-transform:skewX(25deg);-moz-transform:skewX(25deg);-ms-transform:skewX(25deg);transform:skewX(25deg);}
.boat .boat-bot-layer .bottom:after{top:-13px;left:28px;width:5px;height:5px;border-radius:50%;background:inherit;}
.boat .water{bottom:0;left:150px;position:absolute;}
.boat .water .drops{width:300px;height:22px;position:relative;}
.boat .water .drop{left:0;bottom:0;background:#fff;position:absolute;}
.boat .water .drop:before,.boat .water .drop:after{background:inherit;border-radius:inherit;}
.boat .water .drop.drop-a,.boat .water .drop.drop-b,.boat .water .drop.drop-e,.boat .water .drop.drop-f,.boat .water .drop.drop-g{height:5px;border-radius:3px 3px 0 0;}
.boat .water .drop.drop-a{width:10px;}
.boat .water .drop.drop-b,.boat .water .drop.drop-e,.boat .water .drop.drop-f,.boat .water .drop.drop-g{left:15px;width:22px;}
.boat .water .drop.drop-c{left:37px;width:32px;height:7px;border-radius:6px 6px 0 0;}
.boat .water .drop.drop-c:before,.boat .water .drop.drop-c:after,.boat .water .drop.drop-d:before,.boat .water .drop.drop-d:after,.boat .water .drop.drop-g:before{width:2px;height:2px;border-radius:50%;}
.boat .water .drop.drop-c:before{left:0;top:-5px;}
.boat .water .drop.drop-c:after{top:-8px;right:5px;width:4px;height:4px;}
.boat .water .drop.drop-d{left:68px;width:25px;height:10px;border-radius:10px 10px 0 0;}
.boat .water .drop.drop-d:before{top:-8px;left:8px;}
.boat .water .drop.drop-d:after{top:-2px;right:-8px;}
.boat .water .drop.drop-e{left:93px;}
.boat .water .drop.drop-f{width:50px;left:115px;height:4px;}
.boat .water .drop.drop-g{left:auto;right:75px;width:40px;height:2.5px;}
.boat .water .drop.drop-g:before{top:-5px;left:-5px;}
.boat .water .drop.drop-g:after{left:100%;width:12px;height:inherit;}
.boat .water .drop.drop-h{left:auto;right:25px;height:2px;width:25px;}
.boat .water .drop.drop-h:before,.boat .water .drop.drop-h:after{height:inherit;}
.boat .water .drop.drop-h:before{left:30px;width:10px;}
.boat .water .drop.drop-h:after{left:45px;width:4px;}
.boat .water .drops-2{bottom:0;left:30px;position:absolute;}
.boat .water .drops-2 .drop.drop-a{width:15px;border-radius:5px 5px 0 0;}
.boat .water .drops-2 .drop.drop-b{height:10px;border-radius:10px 10px 0 0;}
.boat .water .drops-2 .drop.drop-c:before{left:10px;top:-10px;}
.boat .water .drops-2 .drop.drop-c:after{top:-12px;right:-25px;}
.boat .water .drops-2 .drop.drop-d{height:8px;}
.boat .water .drops-2 .drop.drop-d:before{top:-15px;left:35px;}
.boat .water .drops-2 .drop.drop-d:after{top:-8px;right:-55px;}
.boat .water .drops-2 .drop.drop-g:before{right:0;top:-10px;left:auto;}
.boat .water .drops-2 .drop.drop-h{bottom:0;width:10px;left:auto;height:5px;right:45px;border-radius:5px 5px 0 0;}
.boat .water .drops-2 .drop.drop-h:before,.boat .water .drops-2 .drop.drop-h:after{display:none;}
.drops-1{-webkit-animation:blink .8s linear infinite;-moz-animation:blink .8s linear infinite;animation:blink .8s linear infinite;}
.drops-2{-webkit-animation:blink 1.6s linear infinite;-moz-animation:blink 1.6s linear infinite;animation:blink 1.6s linear infinite;}
@-webkit-keyframes boat-start{0%{-webkit-transform:none;-moz-transform:none;transform:none;}
50%{-webkit-transform:translateY(4px);-moz-transform:translateY(4px);transform:translateY(4px);}
100%{-webkit-transform:none;-moz-transform:none;transform:none;}
}
@keyframes boat-start{0%{-webkit-transform:none;-moz-transform:none;transform:none;}
50%{-webkit-transform:translateY(4px);-moz-transform:translateY(4px);transform:translateY(4px);}
100%{-webkit-transform:none;-moz-transform:none;transform:none;}
}
@-webkit-keyframes blink{25%{visibility:hidden;}
50%{visibility:hidden;}
100%{visibility:visible;}
}
@keyframes blink{25%{visibility:hidden;}
50%{visibility:hidden;}
100%{visibility:visible;}
}
分享到QQ
分享到微博
微信扫一扫
