jquery - 导航栏设计

Question

我在应用程序上工作，几乎完成了每个编码和逻辑部分，但现在我要在导航栏上添加一些效果，例如 Example但是我对 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 或伪元素，但实际上您将不得不想出一个更简单的效果。