之前为大家介绍了好几款导航菜单，今天再给大家带来一款css3实现的幽灵按钮式的导航菜单。导航界面非常好看。右侧是一个css3实现的动画消息图标。效果图如下：
在线预览 源码下载
实现代码：
html代码：
<header><nav><a>Home</a> <a>Words</a> <a>Activity</a> <a>Discussion</a> <a>Immersion</a></nav><button class="notif"><span class="icon"></span></button></header>
css3代码：
* {margin: 0; padding: 0; }body {background: #e9e9e9;overflow: hidden; }header {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;background-color: #1CAFF6;background-color: rgba(32, 166, 231, 0.8);background-image: -webkit-gradient(linear, left top, left bottom, from(#20A8E9), to(rgba(30, 158, 220, 0.5)));background-image: -webkit-linear-gradient(top, #20A8E9, rgba(30, 158, 220, 0.5));background-image: linear-gradient(to bottom, #20A8E9, rgba(30, 158, 220, 0.5));padding: 0 50px; }main {background: white;height: 100vh;border-radius: 10px;margin: 30px 55px;background: 0 0 25px rgba(0, 0, 0, 0.04); }nav {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;font: 500 15px/20px "museo-sans-rounded", sans-serif;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;overflow: hidden;padding: 17px 0; }a {display: inline-block;padding: 10px 18px 8px;margin: 0 2px;border-radius: 100px;color: white;cursor: pointer;-webkit-animation: nav-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.1) backwards;animation: nav-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.1) backwards;-webkit-transition: background 0.35s;transition: background 0.35s; } a:hover {background: #1493D1;-webkit-transition: 0;transition: 0; } a:active {background: #107aad; } a:nth-child(1) {-webkit-animation-delay: 0.46667s;animation-delay: 0.46667s; } a:nth-child(2) {-webkit-animation-delay: 0.58333s;animation-delay: 0.58333s; } a:nth-child(3) {-webkit-animation-delay: 0.7s;animation-delay: 0.7s; } a:nth-child(4) {-webkit-animation-delay: 0.81667s;animation-delay: 0.81667s; } a:nth-child(5) {-webkit-animation-delay: 0.93333s;animation-delay: 0.93333s; }@-webkit-keyframes nav-in {from {-webkit-transform: translate3d(0px, 100px, 0);transform: translate3d(0px, 100px, 0);} }@keyframes nav-in {from {-webkit-transform: translate3d(0px, 100px, 0);transform: translate3d(0px, 100px, 0);} } .notif {display: inline-block;border-radius: 50%;background: #1392D0;padding: 7px 9px;width: 40px;height: 40px;border: 0;cursor: pointer;-webkit-transition: 0.35s;transition: 0.35s; } .notif:hover {background: #0e6d9c;-webkit-transition-duration: 0.0875s;transition-duration: 0.0875s;-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); } .notif:active, .notif:focus {-webkit-transition-duration: 0;transition-duration: 0;-webkit-transform: scale(1.15);-ms-transform: scale(1.15);transform: scale(1.15);background: #0b577c;outline: 0; } .notif .icon {display: inline-block;width: 22px;height: 26px;background-image: url("icon.png");-webkit-animation: notif 2s cubic-bezier(0.17, 0.67, 0.4, 1.17) infinite;animation: notif 2s cubic-bezier(0.17, 0.67, 0.4, 1.17) infinite;-webkit-background-size: 1000px 1000px;background-size: 1000px 1000px;background-position: -340px -40px; }@-webkit-keyframes notif {10%, 30% {-webkit-transform: rotate(-25deg);transform: rotate(-25deg);}20%, 40% {-webkit-transform: rotate(25deg);transform: rotate(25deg);}50%, 100% {-webkit-transform: none;transform: none;} }@keyframes notif {10%, 30% {-webkit-transform: rotate(-25deg);transform: rotate(-25deg);}20%, 40% {-webkit-transform: rotate(25deg);transform: rotate(25deg);}50%, 100% {-webkit-transform: none;transform: none;} }