jquery - 导航栏设计

Question

我在应用程序上工作并完成了几乎所有编码和逻辑部分，但现在我将像在这个示例中那样在导航栏上添加一些效果，但我对 css 不太了解，所以我该如何在我的项目中做到这一点

我目前正在这样做

.nav ul li a {
color: #666666;
display: inline-block;
font-family: DinC;
padding-bottom: 60px;
padding-top: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 84px;
}

在悬停时

.nav ul li a:hover, .nav ul li a.active{
background-image: url(images/hover.png);
background-position: left bottom;
background-repeat: repeat;
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;}

但是通过这个它会立即出现我想要像示例链接中那样的突出

这是我的导航图片

Answer 1

那是闪光。从技术上讲，您可以使用许多单独的动画<div>s 或伪元素来实现，但实际上您将不得不想出一个更简单的效果。