当前位置：首页 > 文章列表 > 文章 > 前端 > CSS数字分页滚动动画实现教程

CSS数字分页滚动动画实现教程

2025-08-12 14:14:45 0浏览收藏

解决方案

要实现分页导航的数字滚动，并利用@keyframes来定义位移效果，我们可以构建一个“舞台”和“演员”的结构。

首先是HTML骨架，我们需要一个外部容器作为“视口”，限制可见区域，并设置overflow: hidden。内部则是一个包含所有页码的元素，它才是真正会进行位移的“演员”。

接下来是CSS部分。关键在于.pagination-viewport和.pagination-numbers的样式，以及我们如何用@keyframes来定义位移。

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 按钮与视口之间的间距 */
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}

.pagination-btn {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.pagination-btn:hover {
    background-color: #e0e0e0;
}

.pagination-viewport {
    width: 250px; /* 假设每个页码宽度50px，这里显示5个 */
    height: 40px; /* 页码的高度 */
    overflow: hidden; /* 隐藏超出视口的内容 */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    display: flex; /* 确保内部元素能正确布局 */
    align-items: center;
}

.pagination-numbers {
    display: flex; /* 让页码横向排列 */
    /* 初始位置，由JS动态控制 */
    transform: translateX(0);
    /* 默认不加transition，因为我们想用keyframes来定义动画 */
    /* transition: transform 0.5s ease-out; */ /* 如果只用JS控制transform，可以加这个 */
}

.page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* 每个页码的宽度 */
    height: 40px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-link:hover {
    background-color: #f5f5f5;
}

.page-link.active {
    background-color: #007bff;
    color: #fff;
    border-radius: 3px;
}

/* @keyframes 定义位移效果 */
/* 这是一个向左滑动的动画，用于“下一页” */
@keyframes slideNumbersLeft {
    from { transform: translateX(var(--start-x, 0)); } /* 允许JS定义起始位置 */
    to { transform: translateX(var(--end-x, -50px)); }   /* 允许JS定义结束位置 */
}

/* 这是一个向右滑动的动画，用于“上一页” */
@keyframes slideNumbersRight {
    from { transform: translateX(var(--start-x, 0)); }
    to { transform: translateX(var(--end-x, 50px)); }
}

/* 当JavaScript添加这些类时触发动画 */
.pagination-numbers.animate-left {
    animation: slideNumbersLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.pagination-numbers.animate-right {
    animation: slideNumbersRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

JavaScript的介入： 因为分页导航的滚动是响应用户点击行为的，纯CSS很难实现这种动态控制。所以，我们需要JavaScript来计算当前的偏移量，并动态地给.pagination-numbers元素添加或移除动画类，同时在动画结束后更新元素的实际transform值，以准备下一次动画。

document.addEventListener('DOMContentLoaded', () => {
    const paginationNumbers = document.getElementById('paginationNumbers');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const pageLinks = document.querySelectorAll('.page-link');

    const numPerPage = 5; // 视口可见的页码数量
    const pageLinkWidth = 50; // 每个页码的宽度
    let currentOffset = 0; // 当前的X轴偏移量

    // 更新活动页码的函数
    const updateActiveClass = (targetPage) => {
        pageLinks.forEach(link => {
            link.classList.remove('active');
            if (link.textContent === String(targetPage)) {
                link.classList.add('active');
            }
        });
    };

    // 假设初始活动页为1
    updateActiveClass(1);

    // 监听动画结束事件，以便重置transform
    paginationNumbers.addEventListener('animationend', () => {
        paginationNumbers.style.transform = `translateX(${currentOffset}px)`;
        paginationNumbers.classList.remove('animate-left', 'animate-right');
    });

    nextBtn.addEventListener('click', () => {
        const totalWidth = paginationNumbers.scrollWidth; // 所有页码的总宽度
        const viewportWidth = paginationNumbers.parentElement.offsetWidth; // 视口宽度

        // 如果还有更多页码可以滚动
        if (Math.abs(currentOffset) < totalWidth - viewportWidth) {
            const nextOffset = currentOffset - (numPerPage * pageLinkWidth);
            // 确保不会滚动过头
            currentOffset = Math.max(-(totalWidth - viewportWidth), nextOffset);

            // 设置CSS变量来控制动画的起始和结束点
            paginationNumbers.style.setProperty('--start-x', `${currentOffset + (numPerPage * pageLinkWidth)}px`);
            paginationNumbers.style.setProperty('--end-x', `${currentOffset}px`);

            paginationNumbers.classList.add('animate-left');
            // 简单更新活动页码（实际应用中需要更复杂的逻辑）
            const activeLink = document.querySelector('.page-link.active');
            let currentPageNum = parseInt(activeLink.textContent);
            if (currentPageNum + numPerPage <= page

理论要掌握，实操不能落！以上关于《CSS数字分页滚动动画实现教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

CSS 分页 transform 数字滚动 @keyframes