必须用 click 事件监听图标触发圆环动画，因悬停易误触且移动端不支持 hover；需用 addEventListener 绑定并防默认行为，配合布尔变量控制展开/收起状态。
点击图标触发圆环动画需要监听什么事件
必须用 click 事件，不是 hover 或 focus —— 圆环是“弹出”动作，用户明确意图点击才展开，悬停容易误触，且移动端不支持 hover。如果绑了 touchstart 又没处理 click 兼容，iOS Safari 会延迟 300ms 触发，造成卡顿感。
- 用
addEventListener('click', handler)绑定，别用onclick属性 - 加
event.preventDefault()防止某些场景下默认跳转（比如图标是<a>标签） - 首次点击展开、再次点击收起，用一个布尔变量控制状态，别每次新建 DOM
圆环排布靠 CSS transform 还是 flex 布局
用 transform: rotate() + 绝对定位更可控。flex 或 grid 搞“一排圆环”看似简单，但角度分布（比如 8 个环均匀绕中心 360°）、半径动态缩放、层级遮挡都难调；而每个圆环元素用 position: absolute + transform: rotate(45deg) translate(80px) rotate(-45deg)，能精准控制弧线轨迹和朝向。
- 外层容器设
position: relative，作为旋转基准点 - 每个圆环元素宽高一致（如
40px），border-radius: 50%，背景色自定 - 旋转角度步长 =
360 / 圆环数量，用 JS 动态生成 style 或 class - 避免用
top/left百分比硬算坐标——小数像素会导致模糊或错位
动画卡顿或闪一下的常见原因
圆环从无到有瞬间出现，本质是 visibility/opacity + transform 的组合问题。只改 opacity 会触发重排；只用 display: none 无法过渡；最稳的是 visibility + opacity + transform 三者联动，并确保所有参与动画的属性都加 will-change: transform, opacity 提前告知浏览器优化。
- 初始状态：设
visibility: hidden; opacity: 0; transform: scale(0.8) - 展开动画：加
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) - 别在动画中修改
width/height或margin，这些强制重排 - 真机调试时关掉 Chrome 的 “Paint flashing”，否则高亮干扰判断
图标悬浮定位和 z-index 容易被盖住
侧边固定图标常被轮播图、弹窗、广告位遮挡，根本原因是父容器用了 overflow: hidden 或 transform 创建了新层叠上下文，导致子元素的 z-index 失效。解决方法不是盲目调高 z-index 数值，而是检查它最近的、有层叠上下文的祖先元素。
立即学习“前端免费学习笔记（深入）”；
- 给图标容器加
position: fixed并指定right和top，脱离文档流 - 确认它没有被包裹在
transform: translateZ(0)、filter、opacity < 1的父级里 - z-index 值写具体数字（如
9999），别用auto；但超过2147483647可能出错 - 圆环弹出层必须和图标同级或更高层叠上下文，否则即使 z-index 再大也压不住
圆环动画真正难的不是旋转角度计算，而是各层叠上下文之间的博弈——一个 transform 就能让整套 z-index 归零，这点很容易被忽略。
