之前为大家介绍了好多导航菜单，今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class="link_txt"> MENU ONE</div> </div> <div class="contener_link"> <div class="link_txt"> MENU TWO</div> </div> <div class="contener_link"> <div class="link_txt"> MENU THREE</div> </div> </div>
css3代码：
.contener_link{ text-align: center; position: relative; width: 170px; height: 50px; cursor: pointer; display: inline-block;}.contener_link .link_txt{ font-family:'Roboto'; position: absolute; width: 150px; font-weight: 300; text-decoration: none; font-size:22px; padding: 10px; color: #ffffff;}.contener_link:hover{ background-color: #f8b334; -webkit-animation-duration:1s; -webkit-animation-name: diaganim; -moz-animation-duration:1s; -moz-animation-name: diaganim; -ms-animation-duration:1s; -ms-animation-name: diaganim; animation-duration:1s; animation-name: diaganim;}@-webkit-keyframes diaganim { 0% {-webkit-transform: skewX(-80deg);} 100% {-webkit-transform: skewX(0deg);}}@-moz-keyframes diaganim { 0% {-moz-transform: skewX(-80deg);} 100% {-moz-transform: skewX(0deg);}}@-ms-keyframes diaganim { 0% {-ms-transform: skewX(-80deg);} 100% {-ms-transform: skewX(0deg);}}@keyframes diaganim { 0% {transform: skewX(-80deg);} 100% {transform: skewX(0deg);}}
