纯CSS实现导航栏下划线跟随滑动效果-前端开发

下面是“纯CSS实现导航栏下划线跟随滑动效果”的完整攻略：

下面是“纯CSS实现导航栏下划线跟随滑动效果”的完整攻略：

理解需求

首先，我们需要理解需求，即导航栏下划线跟随滑动效果的实现。通常情况下，我们会在网站的顶部或页面的一侧添加一个导航栏，让用户可以方便地浏览网站的主要内容。为了让用户更加直观地了解当前页面所在的位置，我们可以在导航栏下方添加一个下划线，用来标识当前所在的页面。

而跟随滑动效果，则是指当用户从一个菜单项滑动到另一个菜单项时，下划线会动态地跟随着菜单项移动，以达到视觉上的连贯性和美观性。

实现思路

要实现导航栏下划线跟随滑动效果，我们可以采用以下几个步骤：

为每个菜单项添加一个独立的ID，以便于后续通过锚点定位到对应的页面；
使用CSS设置导航栏的样式，包括字体、背景色、位置等；
使用CSS设置下划线的样式，包括宽度、高度、颜色、位置等；
通过CSS伪类（:hover）或JS监听鼠标滑动事件，动态修改下划线的位置和宽度。

下面分别详细说明。

实现步骤

为菜单项添加ID

为了方便后续定位，我们需要给每个菜单项都添加一个唯一的ID。在HTML代码中，我们可以这样写：

<ul>
    <li><a href="#home" id="home-link">Home</a></li>
    <li><a href="#about" id="about-link">About</a></li>
    <li><a href="#services" id="services-link">Services</a></li>
    <li><a href="#contact" id="contact-link">Contact</a></li>
</ul>

设置导航栏样式

我们可以使用CSS样式来设置导航栏的样式，例如字体、背景色、位置等。具体代码如下：

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

nav ul li {
    margin-right: 10px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
}

nav a:hover {
    background-color: #555;
}

在上述代码中，我们设置了导航栏的样式，包括了字体、背景色、高度、位置等等。

设置下划线样式

要实现导航栏下划线跟随滑动效果，我们需要先设置下划线的样式。具体代码如下：

nav ul li a {
    position: relative;
}

nav ul li a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
    transform-origin: center;
}

在上述代码中，我们使用了伪元素（:after）来为每个菜单项添加下划线。下划线的样式包括了宽度、高度、位置、颜色等。

要注意的是，我们将下划线的默认宽度设置为0，这样下划线就不会在一开始就显示出来了，等到鼠标移动到菜单项上时，再通过CSS的transform属性来动态修改下划线的宽度。

改变下划线位置和宽度

最后，我们需要通过CSS伪类（:hover）或JS来实现导航栏下划线跟随滑动效果。以CSS的:hover伪类为例，具体代码如下：

nav ul li a:hover:after {
    transform: scaleX(1);
}

在上述代码中，我们使用:hover伪类来监听鼠标移动事件，当鼠标移动到菜单项上时，就会执行transform属性，将下划线的宽度从0变为100%。

通过上述步骤，我们就成功地实现了导航栏下划线跟随滑动效果。具体实现效果可以参考下面的两个示例：

示例一

下面是一个非常简单的实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>Navigation bar with underline effect</title>
    <style>
        nav {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color: #fff;
            font-size: 16px;
            height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        }

        nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }

        nav ul li {
            margin-right: 10px;
        }

        nav ul li:last-child {
            margin-right: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            position: relative;
        }

        nav a:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transform: scaleX(0);
            transition: transform 0.3s ease-out;
            transform-origin: center;
        }

        nav a:hover:after {
            transform: scaleX(1);
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <h1>Navigation bar with underline effect</h1>
    <p>Example of navigation bar with underline effect.</p>
</body>
</html>

在上述代码中，我们使用了简单的HTML和CSS来实现导航栏下划线跟随滑动效果。

示例二

下面是一个稍微复杂一些的实现示例，其中使用了锚点来实现页面内跳转：

<!DOCTYPE html>
<html>
<head>
    <title>Navigation bar with underline effect</title>
    <style>
        nav {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color: #fff;
            font-size: 16px;
            height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        }

        nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }

        nav ul li {
            margin-right: 10px;
        }

        nav ul li:last-child {
            margin-right: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            position: relative;
        }

        nav a:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fff;
            transform: scaleX(0);
            transition: transform 0.3s ease-out;
            transform-origin: center;
        }

        nav a:hover:after,
        nav a.active:after {
            transform: scaleX(1);
        }

        h1,
        h2 {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <h1 id="home">Home</h1>
    <p>Example of navigation bar with underline effect.</p>
    <h2 id="about">About</h2>
    <p>This is some information about the website.</p>
    <h2 id="services">Services</h2>
    <p>These are the services we provide.</p>
    <h2 id="contact">Contact</h2>
    <p>Here's how you can contact us.</p>
</body>
</html>

在上述代码中，除了基本的HTML和CSS外，我们还使用了锚点来实现页面内跳转，使用户可以更方便地浏览网站的各个页面。

同时，在CSS中，我们针对active链接的伪类（:active）也设置了下划线宽度为100%，让用户在点击链接时也能看到下划线效果。

总之，实现导航栏下划线跟随滑动效果并不难。只要你熟练运用HTML和CSS，合理设置样式以及了解伪类和JS，就可以轻松实现这个效果。