响应式景观卡片 · 在线演示

演示了什么：这个 Demo 让你亲眼看到一组文章卡片如何在桌面端用悬停放大、在移动端用点击选中来保持同样的反馈。图片没有依赖外部资源，而是用 CSS 渐变画出不同景观，方便单文件嵌入 iframe。

关键实现：

1. html 里的 .card 使用 button 而不是普通 div，因为它天然可聚焦、可点击，键盘和触屏不需要额外补语义。
2. css 里的 .art:before 承担“图片层”，缩放只改 transform，不会像改宽高那样触发布局重排，动画更稳。
3. js 里的 selectCard(card) 同步切换 .active 和 aria-pressed，让移动端点击状态与辅助技术读到的状态一致。

动手改一改：

1. 把 css 中 .card:hover,.card.active 的 translateY(-6px) 改成 -14px，观察卡片浮起感明显增强。
2. 把 .card:hover .art:before 的 scale(1.22) 改成 scale(1.05)，图片放大反馈会变得更克制。