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

之前为大家介绍了好多导航菜单，今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下：

在线预览 源码下载

实现的代码。

html代码：

  
        
            
                MENU ONE
        
        
            
                MENU TWO
        
        
            
                MENU THREE
        
    

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);}}