简单css滑动门效果

今天给各位小伙伴分享一个简单的滑动门效果

html代码

<ul id="nav">
<li class="active"><a href="#">Nav1</a></li>
<li><a href="#">Nav2</a></li>
<li><a href="#">Nav3</a></li>
</ul>

css代码

#nav li {
position: relative;
}
#nav li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
background-color: #f2f2f2;
transition: background-color 0.5s ease;
}
#nav li.active a,
#nav li:hover a {
background-color: #666;
color: #fff;
}
#nav li a:before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 0;
height: 50px;
background-color: #666;
transition: width 0.5s ease;
}
#nav li.active a:before,
#nav li:hover a:before {
width: 100%;
}