分页导航的数字滚动效果通过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 
