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

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS实现数字分页滚动效果，@keyframes位移动画教程》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

分页导航的数字滚动效果通过HTML结构、CSS的overflow隐藏和transform位移结合@keyframes动画实现，具体步骤为：1. 创建外层视口容器并设置overflow: hidden以限制可见区域；2. 内部页码容器使用flex布局横向排列页码，并通过transform: translateX进行位移；3. 利用@keyframes定义slideNumbersLeft和slideNumbersRight动画，分别实现向左和向右的滑动效果，动画时长、缓动函数和forwards保持最终状态；4. JavaScript动态计算偏移量，在用户点击“上一页”或“下一页”时，设置CSS自定义属性--start-x和--end-x确定动画起止位置，并添加animate-left或animate-right类触发动画；5. 监听animationend事件，动画结束后将元素的transform值更新为最终位移并移除动画类，确保下一次动画正确执行，从而完成流畅的数字滚动效果。

分页导航中的数字滚动效果，特别是利用@keyframes实现位移，通常是通过巧妙地结合HTML结构、CSS的overflow属性以及transform的动画来实现的。核心思想是创建一个可见的“视口”，然后让一个包含所有页码的内部元素在这个视口内进行位移，从而营造出数字滚动的视觉效果。这不仅仅是简单的左右滑动，@keyframes的引入让这种位移拥有了更丰富的可能性，比如非线性的缓动、多阶段的动画，甚至是同时改变透明度等。

解决方案

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

首先是HTML骨架，我们需要一个外部容器作为“视口”，限制可见区域，并设置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>

接下来是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学习网公众号吧！