CSS如何创建分页导航点动画？@keyframes脉冲效果-css教程-PHP中文网

CSS如何创建分页导航点动画？@keyframes脉冲效果

蓮花仙者

发布： 2025-08-18 09:04:01

原创

884人浏览过

通过javascript监听点击事件并动态添加.active类来实现选中状态高亮；2. 使用transition属性设置background-color的平滑过渡效果；3. 调整@keyframes中scale、opacity、animation-duration和animation-timing-function等参数优化脉冲动画视觉效果，最终实现具有交互反馈和动态视觉吸引力的分页导航点。

CSS如何创建分页导航点动画？@keyframes脉冲效果

CSS创建分页导航点动画，核心在于利用

@keyframes

登录后复制

定义动画的关键帧，并将其应用到导航点元素上，模拟一种“脉冲”效果，吸引用户的注意力。

创建分页导航点动画，主要涉及以下步骤：定义关键帧动画、选择导航点元素、应用动画效果，以及调整动画参数。

如何实现导航点在选中状态下的高亮显示？

选中状态的高亮显示通常通过CSS伪类

:active

登录后复制

或

:focus

登录后复制

，以及JavaScript事件监听来实现。例如，可以监听导航点的点击事件，然后使用JavaScript添加或移除一个特定的CSS类，该类定义了选中状态下的样式。

立即学习“前端免费学习笔记（深入）”；

CSS部分：

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    display: inline-block;
    cursor: pointer;
}

.nav-dot.active {
    background-color: #007bff; /* 选中状态的颜色 */
}

登录后复制

JavaScript部分：

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

查看详情

const navDots = document.querySelectorAll('.nav-dot');

navDots.forEach(dot => {
    dot.addEventListener('click', function() {
        // 移除所有导航点的 active 类
        navDots.forEach(d => d.classList.remove('active'));
        // 为当前点击的导航点添加 active 类
        this.classList.add('active');

        // 可以根据导航点的位置，切换内容区域的显示
        // 例如：
        // const index = Array.from(navDots).indexOf(this);
        // showContent(index);
    });
});

登录后复制

这段代码首先定义了导航点的基本样式，以及选中状态下的

.active

登录后复制

样式。然后，通过JavaScript监听导航点的点击事件，在点击时移除所有导航点的

.active

登录后复制

类，并为当前点击的导航点添加

.active

登录后复制

类，从而实现高亮显示。

如何使用CSS实现导航点的平滑过渡效果？

平滑过渡效果可以使用CSS的

transition

登录后复制

属性来实现。

transition

登录后复制

允许你指定CSS属性变化的持续时间、缓动函数和延迟时间，从而使动画看起来更加自然。

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.nav-dot:hover {
    background-color: #999; /* 鼠标悬停时的颜色 */
}

.nav-dot.active {
    background-color: #007bff; /* 选中状态的颜色 */
}

登录后复制

在这个例子中，

transition: background-color 0.3s ease;

登录后复制

表示

background-color

登录后复制

属性的变化会在0.3秒内完成，缓动函数为

ease

登录后复制

。这使得导航点颜色变化看起来更加平滑。你还可以尝试不同的缓动函数，如

linear

登录后复制

、

ease-in

登录后复制

、

ease-out

登录后复制

、

ease-in-out

登录后复制

，来获得不同的动画效果。

如何调整@keyframes脉冲效果的参数以达到最佳视觉效果？

@keyframes

登录后复制

脉冲效果的关键在于调整关键帧中的属性值，例如

transform: scale()

登录后复制

、

opacity

登录后复制

、

box-shadow

登录后复制

等。调整这些参数可以改变脉冲的大小、速度、透明度和颜色，从而达到最佳视觉效果。

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    display: inline-block;
    cursor: pointer;
    position: relative; /* 必须设置position，才能使用伪元素 */
}

.nav-dot::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.5); /* 脉冲颜色 */
    transform: scale(1);
    opacity: 0;
    animation: pulse 1.5s infinite; /* 应用动画 */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5); /* 脉冲大小 */
        opacity: 0;
    }
}

登录后复制

在这个例子中，