单选框动画（圆点弹性放大 + 波纹扩散选中动效）

效果演示（真实可交互）

演示区上方是三个经典单选项：点击任意一项，圆点从中心弹性放大弹出，同时选中项外圈扩散出一圈波纹并淡出，未选中项的圆点自动收起。下方是一个分段选择器变体（日间 / 夜间 / 自动），选中项填充渐变背景并微微弹跳，适合做设置面板或筛选器的视觉升级。

完整代码

HTML（原生 radio 加双层圆点结构）：

<label class="rdo">
  <input type="radio" name="demo" />
  <span class="rdo-mark"><span class="rdo-dot"></span></span>
  单选项文字
</label>

CSS（圆点弹性放大 + 伪元素波纹扩散）：

.rdo input { position: absolute; opacity: 0; }
.rdo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #6c8cff, #8a5cff);
  transform: scale(0);                        /* 默认隐藏 */
}
.rdo input:checked + .rdo-mark .rdo-dot {
  animation: rdo-pop .35s cubic-bezier(.34, 1.56, .64, 1) forwards; /* 过冲回弹 */
}
.rdo input:checked + .rdo-mark::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(108, 140, 255, .5);
  animation: rdo-ping .5s ease-out;           /* 外圈波纹 */
}
@keyframes rdo-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rdo-ping { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

两层动画分别落在不同元素上：圆点用 cubic-bezier(.34, 1.56, .64, 1)——Y 值超过 1 产生过冲，圆点会先弹过目标大小再回正，手感活泼；波纹用 ::after 伪元素画一圈描边圆，从 0.7 倍放大到 1.5 倍并淡出，模拟「选中冲击波」。name 相同保证同一组 radio 互斥，选中态全部由 CSS :checked 驱动，无需一行 JS。

参数说明

兼容性与性能

• 纯 CSS 实现，无 JavaScript；:checked 选择器与 transform 动画兼容 Chrome 26+ / Safari 7+ / Firefox 20+ / Edge
• 动画只涉及 transform 与 opacity，合成器处理；伪元素不增加 DOM 节点，多个选项组同页性能无忧
• 保留原生 radio 语义，表单提交、键盘方向键切换、屏幕阅读器播报全部可用
• 分段选择器变体复用同一套 checked 逻辑，改样式即可适配不同场景

常见问题

Q: 点击选项时圆点没弹出来？ 检查 .rdo-dot 是否设置了 transform: scale(0) 初始态，以及 checked 选择器层级是否正确（input 与 .rdo-mark 必须相邻）。

Q: 波纹扩散一次后就不再出现？ ::after 的动画只在 checked 状态变化时触发。同一组内切换选项时，新选中项的波纹会正常播放；反复点击已选中项不会重播，这是预期行为。

Q: 想让分段选择器的选中项加滑动动画？ 可以组合滑动指示条：为分段容器加 position: relative，用 JS 测量选中项位置并驱动一个绝对定位的指示层，与标签指示器组件（tab-indicator-animation）是同一套思路。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。