前端代码：分页页码美化，感受灵动丝滑的过渡效果

「秒级吸睛」的分页动效体验：通过锚点动画与桥接指示器，把每一次页码切换都变成视觉亮点，专为需要震撼现场演示的团队打造。

这个前端Demo由 KS 主题团队精选再设计，主打「Progressive Anchor Pagination」体验。整体配色沿用轻盈的中性色与霓虹感点缀，辅以亮/暗双主题和渐变指示条，让页面在任何光线环境下都保持高级感。拖动右上角的 Tweakpane 控制台即可实时切换圆角、主题和桥接效果，完全契合演示、产品路演和前端教学场景。

组件亮点

• 锚点驱动的焦点动画：借助原生 anchor-name 与 CSS 变量，当前页高亮与 hover 状态拥有丝滑插值过渡。
• 桥接式分页提示：在存在省略号的断点处绘制桥状渐变，帮助用户感知前后区间，兼顾可访问性。
• 多主题 + 可调半径：通过 Tweakpane + ES6 Module 组合，可快速自定义圆角、主题和 debug 模式。
• GSAP Draggable：配置面板支持拖拽&双击归位，确保复杂页面中也能自由摆放。

设计语言

• 配色：浅色模式以雾白与石墨灰为主，暗色模式以石墨黑配银灰高光；桥接条则使用洋红与电蓝形成对比。
• 字体与排版：SF Pro 系字体体系 + 流式排版（Fluid Type Scale），在 375px-1500px 区间都能保持舒适阅读。
• 品牌露出：默认整合 KS主题 品牌标识，可按需替换为自有链接或文案。

适用人群

• 需要在演示/路演中展示交互动效实力的前端设计师；
• 希望快速添加高完成度分页组件的后台、仪表盘、CMS、SaaS 团队；
• 进行交互设计教学或需要展示 CSS Anchor、GSAP、Tweakpane 应用的教育机构。

快速开始

1. 克隆或下载本仓库。
2. 使用任意静态服务器（如 npm serve/vite preview/python -m http.server）打开 index.html。
3. 在浏览器中体验分页动画，并通过控制面板调优参数。

技术要点

• 采用 ES6 Module 形式加载 tweakpane@4、gsap@3 与 Draggable 插件。
• 使用 requestAnimationFrame 与 CSS 自定义属性同步当前选中项尺寸与坐标。
• 针对未支持 anchor-name 的浏览器提供渐进增强方案，确保跨端一致性。

本地运行教程

本项目使用了 ES6 模块（<script type="module" src="./script.js"></script>），这类项目必须通过 HTTP 服务器运行，不能直接使用 file:// 协议打开。所以在电脑本地测试修改时可以选择下面方法来进行效果预览。

方法一：使用编辑器里的实时预览插件

VS Code 扩展市场安装：Live Preview （作者：ms-vscode 即微软官方扩展）

安装后：

1. 在编辑器中打开你的项目文件夹
2. 右键 index.html
3. 选择 Show Preview
4. 自动启动 http://127.0.0.1:3001/index.html

✔ 自动刷新
✔ 原生支持 ES6 Modules
✔ 支持文件变更监听
✔ 最适合前端 UI 组件、动画、ESM 项目预览

方法二：使用我们提供的脚本

1. 下载项目文件（已内置运行脚本），本地解压。

2. 启动本地服务器

   方式一：使用Node.js脚本（推荐，跨平台）

   			node start-server.js
   # 或指定端口
   node start-server.js --port 3000
   
   		

   方式二：使用Shell脚本（Linux/macOS）

   			./start.sh
   # 或指定端口
   ./start.sh 3000
   
   		

   方式三：使用批处理脚本（Windows）

   			start.bat
   # 或指定端口
   start.bat 3000
   
   		

   或者使用简化版：

   			start.cmd
   # 或指定端口
   start.cmd 3000
   
   		

   方式四：使用Python（如果已安装，跨平台）

   			python3 -m http.server 8080
   # Windows 上也可以使用
   python -m http.server 8080
   
   		

3. 访问项目

   打开浏览器访问： http://localhost:8080/