如何使用纯CSS实现从按钮两侧滑入元素的悬停效果

2024-01-17 11:27 小编
 代码解读
    定义dom,容器是一个无序列表,列表项代表按钮:
    <ul>
    <li>home</li>
    </ul>
    居中显示:
    body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(deepskyblue,navy);
    }
    去掉列表项前面的符号:
    ul{
    padding:0;
    list-style-type:none;
    }
    设置按钮的文字样式:
    ulli{
    color:#ddd;
    font-size:25px;
    font-family:sans-serif;
    text-transform:uppercase;
    }
    用伪元素在按钮的左侧增加一个方块:
    ulli{
    position:relative;
    }
    ulli::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:tomato;
    left:-100%;
    }
    用伪元素在按钮的右侧增加一条下划线:
    ulli::after{
    content:'';
    position:absolute;
    width:100%;
    height:0.2em;
    background:tomato;
    bottom:0;
    left:100%;
    }
    接下来设置鼠标悬停效果。
    当鼠标悬停时,左侧的方块移到文字所在位置:
    ulli::before{
    transition:0.4sease-out;
    }
    ulli:hover::before{
    left:100%;
    }
    右侧的下划线移到文字所在位置,它的动画时间延迟到方块的动画快结束时再开始:
    ulli::after{
    transition:0.3s0.3sease-out;
    }
    ulli:hover::after{
    left:0%;
    }
    同时,提高文字的亮度:
    ulli{
    transition:0.3s;
    cursor:pointer;
    }
    ulli:hover{
    color:#fff;
    }
    隐藏掉按钮外的部分,使方块和下划线在默认状态下都不可见,只有鼠标悬停时它们才从两侧入场:
    ulli{
    overflow:hidden;
    }
    最后,在dom中再增加几个按钮:
    <ul>
    <li>home</li>
    <li>products</li>
    <li>services</li>
    <li>contact</li>
    </ul>
    布局多个按钮:
    ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    }
    ulli{
    margin:0.5em;
    }


Tag: 如何 效果
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码