Question

当您将鼠标悬停在＆＃34;登录，注册＆＃34;橡子网站（https://www.acorns.com/）你可以看到动画的进展。所以我有一个李

.navbar  li{
    display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;

}

.navbar li:hover, .navbar li:active{
   border-width:4px;    
   border-top-style:solid;
   border-top-color: #e0b82b;}

如何使边框顶部动画？如上图所示。谢谢。

http://jsfiddle.net/9mfccz6w/ 我试图为顶栏设置动画（黄色）

Answer 1

.navbar  li {
   display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
   -webkit-transition: all .3s ease-in-out;
           transition: all .3s ease-in-out;
}

.navbar  li:hover {
   -webkit-transform: translateY(-2px);
      -moz-transform: translateY(-2px);
       -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
           transform: translateY(-2px);
}

上面的代码会让你的问题变得更有趣。

查看CSS3动画：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

您可以将CSS Tranistions添加到.navbar li样式中。试试这段代码：

.navbar  li{
   display: inline-block;
   border-width:5px;    
   border-top-style:solid;
   border-top-color: white;
   -webkit-transition: all 0.5s ease;                  
   -moz-transition: all 0.5s ease;                 
   -o-transition: all 0.5s ease;   
   -ms-transition: all 0.5s ease;          
   transition: all 0.5s ease;
}

JSFiddle

如何设置边框效果的动画效果

2 个答案: