悬停效果使用 CSS 闪烁

Question

我尝试在元素的背景上做简单的悬停效果，但是当光标在元素上时，在完成背景上的整个过渡之前，背景闪烁了一会儿，然后闪烁停止了。

div.nav {float:left;}
div.nav ul{list-style-type: none;
margin: 0;
padding: 0;
width: 180px;}
div.nav ul li{border:1px solid #EAEAEA;}
div.nav ul li a {display:inline-block;
color: black;
width:180px;
margin:0 auto;
padding:50px 0;
text-decoration: none;
text-align:center;
text-transform:uppercase;
box-shadow: inset 0 0 0 0 gold;
		         -webkit-transition: linear 1s;
-moz-transition: linear 1s;
transition: linear 1s;
		         cursor:pointer;}
div.nav ul li a:hover{  box-shadow: inset 400px 0 0 0 gold;}
div.nav ul li a i{display:block;
margin-bottom:5px;}	

<div class="nav">
<ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
</div>

我试图找到闪烁但改变填充和宽度的原因，但找不到任何原因。

Answer 1

我认为这可能会有所帮助： 滑动背景效果

但是，我希望这可以有所帮助：

div.nav {
float: left;
}
div.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
div.nav ul li {
border: 1px solid #EAEAEA;
}
div.nav ul li a {
display: inline-block;
color: black;
width: 180px;
margin: 0 auto;
padding: 50px 0;
text-decoration: none;
text-align: center;
text-transform: uppercase;
cursor: pointer;
background-image: linear-gradient(to right, gold, gold 50%, transparent 50%, transparent);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .5s ease-out;
}
div.nav ul li a:hover {
background-position: 0 0;
}
div.nav ul li a i {
display: block;
margin-bottom: 5px;
}

<div class="nav">
<ul>
<li>
<a href="#"> <i class="fa fa-user"></i>About Me</a>
</li>
<li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
<li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
<li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
</ul>
</div>

Answer 2

div.nav {float:left;}
div.nav ul{list-style-type: none;
margin: 0;
padding: 0;
width: 180px;}
div.nav ul li{border:1px solid #EAEAEA;}
div.nav ul li a {display:inline-block;
position:relative;
z-index:2;
color: black;
width:180px;
margin:0 auto;
padding:50px 0;
text-decoration: none;
text-align:center;
text-transform:uppercase;
		         -webkit-transition: ease 1s;
-moz-transition: all ease 1s;
transition: all ease 1s;
		         cursor:pointer;}
div.nav ul li a:after{ 
content:"";
z-index:-1;
width: 0%;
height: 100%;
	                   background-color: gold;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
transition: all .5s ease-out;
}
		   
div.nav ul li a:hover:after{ width:100%;}

<div class="nav">
<ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
</div>

试试这个.. 只需使用 ：before 而不是框影

Answer 3

不要使用框阴影，而是使用:before创建一个绝对定位的伪元素，然后您可以对其进行动画处理

div.nav {
float:left;
}
div.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
div.nav ul li {
border:1px solid #EAEAEA;
}
div.nav ul li a {
display:inline-block;
color: black;
width:180px;
margin:0 auto;
padding:50px 0;
text-decoration: none;
text-align:center;
text-transform:uppercase;
/*box-shadow: inset 0 0 0 0 gold;*/
cursor:pointer;
position: relative;
}
div.nav ul li a:before {
content: '';
position: absolute;
z-index: -1;
background: gold;
top: 0;
left: 0;
right: 100%;
bottom: 0;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
transition: .5s ease-in;

}
div.nav ul li a:hover:before {
right: 0;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
transition: .5s ease-out;
}
div.nav ul li a i {
display:block;
margin-bottom:5px;
}

<div class="nav">
<ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
</div>