css3怎么實現動畫導航

這篇文章主要介紹“css3怎么實現動畫導航”，在日常操作中，相信很多人在css3怎么實現動畫導航問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3怎么實現動畫導航”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　之前為大家介紹了好多導航菜單，今天給大家分享一款簡潔的純css3代碼實現的動畫導航。鼠標經過的時候以背景色以菱形漸變為長方形。效果圖如下：

　　實現的代碼。

　　html代碼：

代碼如下:

<div align="center" >
       <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);}
}

到此，關于“css3怎么實現動畫導航”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！