纯CSS如何实现导航栏下划线跟随滑动效果

发布时间：2023-01-01 07:22:43 来源：互联网

.

我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

web页面中使用一些CSS动画效果，可以使用网站看着更加的炫酷。下面这篇博文由飞鸟慕鱼说一个关于网页导航栏实现下划线跟随滑动效果的方法，此方法全部由CSS代码实现，非常的简单方便。

CSS导航栏下划线跟随滑动效果

示例图：

纯CSS实现导航栏下划线跟随滑动效果

实现代码：

下面示例代码，复制保存到本为为html格式的文件，即可查看！

<style>
    .items {
        display:flex;
    }
    .items li {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #333;
        position: relative;
        margin: 10px 10px 0px 0px;
        cursor: pointer;
        list-style-type:none;
    }
    .items li:before {
        content:'';
        height:2px;
        background-color:#c95119;
        width:100%;
        position:absolute;
        left:0;
        bottom:0;
        transform:scaleX(0);
        transition:.3s;
        
    }
    .items li:hover:before {
        transform:scaleX(1);
    }
</style>
<ul class="items">
    <li></li>
    <li></li>
    <li></li>
</ul>

到此这篇关于纯CSS如何实现导航栏下划线跟随滑动效果就介绍到这了。人性最可怜的就是:我们总是梦想着天边的一座奇妙的玫瑰园,而不去欣赏今天就开在我们窗口的玫瑰.更多相关纯CSS如何实现导航栏下划线跟随滑动效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: