伪元素波浪旋转像果冻是因为 border-radius 在 transform 旋转时发生形变，并非纯弧线动画；应避免大角度旋转、用大尺寸小圆角、设 overflow:hidden 并配合弹性贝塞尔曲线实现自然动效。
用 ::after 伪元素 画波浪，为什么圆角转起来像果冻？
因为 border-radius 在旋转时会随 transform 变形，不是纯弧线动画——它本质是矩形加圆角再旋转，视觉上边缘会被拉伸。真正平滑的波浪得靠 clip-path 或 SVG，但如果你坚持用伪元素 + 圆角，就得接受这种“软边抖动”效果。
实操建议：
- 用大尺寸（比如
width: 400vw）+ 小圆角（border-bottom-left-radius: 50% 15%）降低变形感 - 避免
transform: rotate()超过 ±15°，否则底部衔接处会露白边或撕裂 - 父容器必须设
overflow: hidden，否则旋转后伪元素会溢出 - 动画帧率要稳，加
will-change: transform防掉帧
CSS 里怎么让伪元素波浪动得自然不卡顿
直接 @keyframes 旋转 transform: rotate() 看着像风扇，不是波浪。真要模拟起伏，得用位移 + 缩放组合，或者换思路：用 background-position-x 配合重复的波浪背景图（SVG inline data URL 最省事）。
如果硬要用伪元素旋转：
立即学习 “ 前端免费学习笔记（深入）”；
- 动画属性只写
transform，别混top/left，否则触发重排 - 用
cubic-bezier(.34,1.56,.64,.4)模拟弹性，比ease-in-out更像水感 - 动画时长建议 8–12s，太快像抽搐，太慢看不出动效
- 别在移动端开
rotateZ动画，iOS Safari 旧版本会模糊或闪屏
border-radius 百分比数值怎么配才不出锯齿
border-radius 写成 50% 20% 这种双值时，第一个是水平椭圆半径，第二个是垂直椭圆半径；如果容器宽高比不稳定（比如响应式布局），波浪形状就会塌或挤。固定宽高比才是前提。
安全配法：
- 父容器设
aspect-ratio: 4/1或用padding-top: 25%维持比例 - 伪元素
height设为固定值（如120px），border-radius改用 px 单位（如0 0 80px 80px）更可控 - 避免
50% 50%—— 那是正圆，转起来就是个滚轮，不是波浪 - Chrome 115+ 支持
radial-gradient+mask-image做抗锯齿波浪，但 Safari 还不支持 mask 复合函数
伪元素波浪和真实内容底部对不齐怎么办
绝对定位的伪元素默认以父容器左上角为原点，而波浪需要“贴底”，但 bottom: 0 只能对齐容器底边，不能自动匹配内容高度。尤其当内容有 margin/padding 或字体行高干扰时，会悬空或压字。
解决办法很实在：
- 把伪元素插在内容块的 最后一个子元素之后，而不是整个页面最外层容器里
- 给伪元素加
top: auto; bottom: 0;，同时父容器设position: relative - 如果内容高度动态，用 JS 监听
resize并更新伪元素top值（仅当 CSS 方案彻底失效时才上） - 更稳的替代：不用伪元素，改用
background: url("data:image/svg+xml,……") bottom / contain no-repeat，SVG 波浪可缩放、无锯齿、不占布局流
真正难的不是画出波浪，是让它在不同设备、不同字号、不同内容高度下都严丝合缝地“坐在那儿”。多数人卡在父容器没设 overflow: hidden 或忘了伪元素的 z-index 比内容低，结果波浪被盖住，还以为是动画没跑。
