当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现5张卡片轮播教程

CSS实现5张卡片轮播教程

2026-02-26 18:51:45 0浏览收藏

✅ 第一步：扩展 HTML 结构

添加两个新的 radio 控件与对应卡片/信息标签：










...
...

注意：所有 name="slider" 必须一致，确保单选互斥；for 与 id 需严格配对。

✅ 第二步：重写 CSS 映射逻辑

原 3 卡逻辑是环形偏移（如 #item-1:checked → #song-2 右移、#song-3 左移），5 卡需构建更精细的“中心-近邻-远邻”三层关系：

中心卡片（高亮显示）：当前选中项自身，scale(1), opacity: 1, z-index: 1
近邻卡片（弱化展示）：左右各 1 张，translateX(±40%), scale(0.8), opacity: 0.4
远邻卡片（完全隐藏）：其余 2 张，仅设 opacity: 0.4（或可设 visibility: hidden 提升性能）

对应关键 CSS 规则如下（精简核心）：

/* 中心卡片：每个 item-N 选中时，唯一激活对应 song-N */
#item-1:checked ~ .cards #song-1,
#item-2:checked ~ .cards #song-2,
#item-3:checked ~ .cards #song-3,
#item-4:checked ~ .cards #song-4,
#item-5:checked ~ .cards #song-5 {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 1;
}

/* 近邻左卡片（顺时针前一张）：item-1→song-5, item-2→song-1... */
#item-1:checked ~ .cards #song-5,
#item-2:checked ~ .cards #song-1,
#item-3:checked ~ .cards #song-2,
#item-4:checked ~ .cards #song-3,
#item-5:checked ~ .cards #song-4 {
  transform: translateX(-40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

/* 近邻右卡片（顺时针后一张）：item-1→song-2, item-2→song-3... */
#item-1:checked ~ .cards #song-2,
#item-2:checked ~ .cards #song-3,
#item-3:checked ~ .cards #song-4,
#item-4:checked ~ .cards #song-5,
#item-5:checked ~ .cards #song-1 {
  transform: translateX(40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

/* 远邻卡片（剩余两张）：统一设低透明度，不参与位移 */
#item-1:checked ~ .cards #song-3,
#item-1:checked ~ .cards #song-4,
#item-2:checked ~ .cards #song-4,
#item-2:checked ~ .cards #song-5,
/* ... 其他 10 种组合（共 C(5,2)=10 对） */
#item-5:checked ~ .cards #song-3 {
  opacity: 0.4;
}

? 提示：上述远邻规则虽略显冗长，但这是纯 CSS 方案的必然代价。若追求可维护性，建议后续迁移到 CSS 自定义属性 + JavaScript 动态控制，但本文聚焦零 JS 解法。

✅ 第三步：同步更新播放信息区位移

.info-area#test 的垂直位移需匹配 5 张卡片高度（每张 info 高度约 40px）：

#item-1:checked ~ .player #test { transform: translateY(0); }
#item-2:checked ~ .player #test { transform: translateY(-40px); }
#item-3:checked ~ .player #test { transform: translateY(-80px); }
#item-4:checked ~ .player #test { transform: translateY(-120px); }
#item-5:checked ~ .player #test { transform: translateY(-160px); }

⚠️ 注意事项

过渡时间一致性：确保 .card 的 transition: transform 0.5s ease 与 .info-area 的 transition: transform 0.4s ease-in 协调，避免视觉割裂；
响应式安全：width: 60% 的卡片宽度在小屏下可能溢出，建议用 min-width 或媒体查询微调；
无障碍增强：为 .card 添加 role="button" 和 aria-label，提升屏幕阅读器支持；
性能提示：大量 :checked ~ 选择器在低端设备可能触发重排，生产环境建议用 will-change: transform 优化。

通过以上三步改造，你即可获得一个稳定、平滑、完全兼容原设计风格的 5 卡 CSS 轮播组件——无需引入任何 JavaScript，保持轻量与语义化优势。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~