利用伪类实现从中间到两边的一个效果,其实这个效果是视觉误差造成产生的,当我们鼠标滑过的时候我们给的值为left:0,width:100%当我们把transiton属性去掉的话,这个效果就是left :0和width:100%同时进行达到慢慢的展开造成了从中间向两边的展开效果。
先上效果图
style.css
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
margin-top: 50px;
}
#box ul{
background: #d62f2f;
text-align: center;
box-shadow: 0 0 19px 0px #a0a0a0;
}
#box ul li{
position: relative;
padding: 20px;
display: inline-block;
font-size: 14px;
font-weight: 700;
font-family: cursive;
cursor: pointer;
color: #fff;
}
#box ul li:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 2px;
background: #3c2d2d;
}
#box ul li:hover:after{
left: 0;
transition: all 1s;
width: 100%;
}
</style>
index.html
<div id="box">
<ul>
<li>网站制作</li>
<li>前端分享</li>
<li>seo优化</li>
<li>搜索引擎优化</li>
</ul>
</div>