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怎么实现动画导航”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！