分页导航的数字滚动效果通过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
评论（已关闭）
评论已关闭