CSS如何创建分页导航数字滚动？@keyframes位移效果

@keyframes

overflow

transform

@keyframes

@keyframes

overflow: hidden

<nav class="pagination-wrapper">
    <button class="pagination-btn prev-btn" aria-label="上一页">上一页</button>
    <div class="pagination-viewport">
        <div class="pagination-numbers" id="paginationNumbers">
            <!-- 动态生成的页码，或者预设一部分 -->
            <a href="#page1" class="page-link active">1</a>
            <a href="#page2" class="page-link">2</a>
            <a href="#page3" class="page-link">3</a>
            <a href="#page4" class="page-link">4</a>
            <a href="#page5" class="page-link">5</a>
            <a href="#page6" class="page-link">6</a>
            <a href="#page7" class="page-link">7</a>
            <a href="#page8" class="page-link">8</a>
            <a href="#page9" class="page-link">9</a>
            <a href="#page10" class="page-link">10</a>
            <!-- 更多页码... -->
        </div>
    </div>
    <button class="pagination-btn next-btn" aria-label="下一页">下一页</button>
</nav>

.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;
}

.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