纯css3鼠标滑过从中间向两边扩散效果
文章 5519 0 0 0
发布时间:2018年12月12日

概述

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

先上效果图

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

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>
评论专区