导航栏设计

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 ;}

但是通过这个，我会立刻出现像示例链接

中的juts

这是我的导航图片

Answer 1

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