这是一款以 CSS 关键帧驱动为主的角色卡片轮播特效：中央一张大图卡片配角色名字，八个卡片按顺序自动轮播，每张停留数秒后向左滑出并淡出，下一张同步从右侧滑入并淡入；底部一行圆形头像作为缩略图导航，当前展示的角色头像会放大并高亮。整段特效核心动画完全在 CSS 里，脚本只负责同步头像高亮，视觉像一段极简的角色巡礼片头。字体和布局都留了自定义空间，方便替换成自己的团队合集、产品线角色、游戏成员卡等场景。

这款角色轮播的四个亮点

卡片的位移+淡入淡出用同一个关键帧 `slide-fade` 定义：`translateX` 从 100% 到 0% 再到 -100%，`opacity` 从 0 到 1 再到 0，一段动画完整覆盖「进-停-出」三阶段。
八张卡片错开出场靠 `animation-delay` 步进：第一张 delay 0、第二张按周期 offset 一格，依此类推，配合 `animation-iteration-count: infinite` 就能无限循环，无需 JS 计时器。
底部圆形导航用 `object-fit: cover` 把头像裁成正圆，`transition` 让当前项直接放大、其他项缩回，鼠标悬停也会预览放大——纯 CSS 就实现了「大图 + 缩略图」双联动。
整套代码不引入任何轮播库，也不使用 `position: absolute` 之外的复杂布局，方便与页面其它内容组合，不会产生层级冲突。

CSS 动画驱动轮播的三个取舍

其一，纯 CSS 轮播的最大缺点是难以响应用户操作（比如点击某个头像跳转），本模板保留了少量 JS 兜底给头像加点击态；核心动画仍走 CSS，避免每帧靠 requestAnimationFrame 计算位置。其二，`animation-delay` 是负值时动画会跳到中段开始播放，正值时是等待——这里全部用正值累加，第一次页面加载会依序看到每张出场，符合直觉。其三，卡片父层用 `overflow: hidden` 裁掉滑出画面的部分，避免溢出遮挡其他内容；导航区的头像不受父层裁剪影响。

换成自己的角色数据要动哪里

八张卡片的图片和名字直接写在 `.slider-wrapper .slide-item` 里，图片路径改成自己的即可；数量增减时，同步在底部 `.dot-box` 里增删对应的 `

`。要改切换节奏，找到 `.slide-item` 的 `animation-duration` 与 `animation-delay`（单位为秒），按你想要的每张停留时间等比调整。要在暗色页面使用，去掉 `.dot` 的白色描边或改为 `box-shadow` 环形高亮即可。

浏览器兼容性：CSS 动画和 `object-fit` 全主流浏览器均支持；如需要在 IE11 等老浏览器运行，请自行降级或补 polyfill。详细运行方法请参见压缩包内的帮助文档。

常见问题

能让轮播在鼠标悬停时暂停吗

可以。给 `.slider-wrapper:hover .slide-item` 加 `animation-play-state: paused`，即可实现悬停暂停、离开继续。

点击底部头像能否跳到对应卡片

可以，但会稍复杂：需要把动画改成基于 `class` 或 CSS 变量控制的偏移，脚本按下标切换类名。示例源码里预留了 `.dot` 的 click 事件挂点。

如何只保留 3~4 张卡片

删掉多余的 `.slide-item` 和 `.dot`，同时把 `animation-duration` 按新数量适当减小（比如 8 张 24s → 4 张 12s），节奏会更紧凑。

手机端图片太大怎么办

给 `.slider-wrapper` 加媒体查询压缩宽高，或者用响应式图片 `srcset` 提供小尺寸版本，避免手机加载 2000px 的大图。

适合放在哪些页面

适合团队页角色巡礼、动画/游戏角色介绍页、产品线代言人展示、活动嘉宾卡片区、店铺主推商品轮播。下载源码后可作为独立模块嵌入任何 HTML 页面。