答题卡选项选中后实现“浅→深”背景色过渡，需用transition控制background-color变化，时长0.25s ease-in，通过JS切换.selected类确保单选互斥，并避免transparent、inherit或未赋值CSS变量导致失效。

答题卡选项选中后实现“浅→深”的背景色过渡，关键在于用 CSS transition 控制颜色变化过程，并确保状态切换逻辑清晰、可复位。不是简单改个颜色，而是让视觉反馈有节奏、不突兀。

给选项元素加统一过渡声明

所有答题选项（如 或

）需预先定义背景色和过渡效果：

• 设置初始背景为浅色，例如 background-color: #f8f9fa
• 添加 transition: background-color 0.25s ease-in —— 时长建议 200–300ms，ease-in 让变深过程略带加速感，更符合“被选中”的确认意味
• 避免写 transition: all，防止边框、阴影等意外参与动画

用类名控制选中态，而非内联样式

推荐通过 JavaScript 切换 .selected 类来管理状态，CSS 中明确写出选中后的深色背景：

• 在样式表中定义：.option.selected { background-color: #2c3e50; }
• JS 点击时先移除其他选项的 .selected，再给当前项加上——保证单选互斥
• 这样 transition 才能稳定触发：浏览器识别到 background-color 从一个具体值变到另一个具体值

注意颜色值必须是可动画的确定值

以下写法会导致过渡失效：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用 transparent 或 inherit 作为初始或目标色
• 用 CSS 变量但没在两个状态下都赋值，例如只在 :root 定义了 --opt-bg，却没在 .selected 里重设
• 用 rgba() 时 alpha 值不同（如 rgba(44,62,80,0.9) → rgba(44,62,80,1)）也能过渡，但纯色到半透会显得发虚，不推荐

增强体验的小技巧

让过渡更自然、更易感知：

• 配合文字颜色微调：选中时文字由 #333 变为 #fff，也加 color 过渡
• 加一点内边距或圆角变化（如 border-radius: 6px → 8px），强化“按下”反馈
• 移动端点击需消除默认高亮（-webkit-tap-highlight-color: transparent）