一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose

之前为大家介绍了好多导航菜单，今天给大家分享一款简洁的纯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);}}