之前为大家介绍了好几款导航菜单，今天再给大家带来一款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; }}
