js css 实现导航栏下划线鼠标跟随效果

最新推荐文章于 2023-09-18 12:03:39 发布

weixin_38322795

最新推荐文章于 2023-09-18 12:03:39 发布

阅读量3.5k

点赞数 2

分类专栏：前端文章标签： css 伪类选择器实现鼠标跟随效果

本文链接：https://blog.csdn.net/weixin_38322795/article/details/79930051

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

pc网页端商城导航栏鼠标滑过会出现下划线，接下来就是实现鼠标滑过出现下划线的动画效果
用到的知识 css的伪元素选择器 ::before。效果图如下：

下划线的效果一般是给元素添加boder-bottom实现的，但这是一个生硬的效果，为了给下划线添加动画效果，我们使用伪元素选择器，通过::before设置border-bottom已达到下划线的动画跟随效果，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            ul,li,ol{
                list-style:none;
            }
            .nav-list{
                width:600px;
                margin:0 auto;
            }
            .nav-list > li{
                display:inline-block;
                margin:5px -3px;
                padding:3px 15px;
                position:relative;
            }
            .nav-list > li:before{
                content:'';
                position:absolute;
                bottom:0px;
                width:0;
                left:50%;
                border-bottom:2px solid red;
                transition:0.2s all linear;
            }
            .nav-list > li:hover::before{
                left:0;
                width:100%;

            }
            .nav-list > li:hover + li::before{
                left:0;
            }
        </style>
    </head>
    <body>
        <ul class="nav-list">
            <li>epc监控</li>
            <li>omc监控</li>
            <li>Boss监控</li>
            <li>Boss计费</li>
        </ul>
    </body>
</html>

weixin_38322795

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
js css 实现导航栏下划线鼠标跟随效果

pc网页端商城导航栏鼠标滑过会出现下划线，接下来就是实现鼠标滑过出现下划线的动画效果用到的知识 css的伪元素选择器 ::before。效果图如下：下划线的效果一般是给元素添加boder-bottom实现的，但这是一个生硬的效果，为了给下划线添加动画效果，我们使用伪元素选择器，通过::before设置border-bottom已达到下划线的动画跟随效果，代码如下：&lt;!DOC...
复制链接

扫一扫