h5悬浮球需径向渐变模拟云体明暗、backdrop-filter模糊柔边、多层非对称贝塞尔位移动画模拟自然漂浮，三者缺一不可。
在 H5 中实现带有半透明渐变的悬浮球漂浮特效，关键不在“动起来”，而在“像云一样呼吸”——它要柔、要透、要有体积感，不能是硬边圆+固定 opacity。核心是三步：用径向渐变模拟云体明暗过渡，用 CSS 模糊强化柔边，再叠加轻量级位移动画模拟自然漂浮。
用径向渐变做出真实云感球体
纯色圆角按钮加 rgba 背景只是半透明，不是“云感”。真正有体积的悬浮球需从中心到边缘颜色与透明度同步衰减：
- 不要用 linear-gradient，必须用 radial-gradient，起点在中心，终点半径设为球直径的 1.2 倍以上
- 推荐配色：中心
rgba(255, 255, 255, 0.7)，边缘rgba(255, 255, 255, 0)，避免发灰可微调 R/G/B 值（如 248, 252, 255） - 配合
backdrop-filter: blur(6px)+border-radius: 50%，边缘立刻软化，不依赖 Canvas
用 CSS 动画模拟无规律漂浮
匀速平移太机械。自然漂浮是缓慢、小幅、方向不定的位移，可用多层贝塞尔曲线叠加：
- 定义两个位移动画：一个横向（
@keyframes floatX），一个纵向（@keyframes floatY） - 每段动画时长设为 12–18s，用
cubic-bezier(0.34, 1.56, 0.64, 1)类非对称缓动，制造“悬停→微顿→滑出”的节奏 - 给悬浮球同时应用两个动画，并设置不同延迟和方向（如 X 向右偏移后回弹，Y 先下沉再浮起），叠加后轨迹就显随机
层级与交互细节不能漏
再好看的漂浮球，一被遮挡或点不中就失效。必须保障基础体验：
- 用
position: fixed定位，z-index: 9999确保压过多数弹窗；若页面有强遮罩（如全屏 loading），可临时提升至z-index: 2147483647 - 添加
pointer-events: auto防止因父容器transform或opacity导致点击失灵 - 移动端需补
-webkit-tap-highlight-color: transparent，避免点击高亮干扰渐变观感
不复杂但容易忽略：渐变背景 + 模糊 + 多层缓动位移，三者缺一不可。少了模糊，边缘生硬；少了径向渐变，只剩扁平圆；少了非线性位移，就成 PPT 动画。
