纯css3鼠标滑过从中间向两边扩散效果

纯css3鼠标滑过从中间向两边扩散效果

        利用伪类实现从中间到两边的一个效果,其实这个效果是视觉误差造成产生的,当我们鼠标滑过的时候我们给的值为left:0,width:100%当我们把transiton属性去掉的话,这个效果就是left :0和width:100%同时进行达到慢慢的展开造成了从中间向两边的展开效果。


先上效果图


jdfw.gif


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>


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容