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>