波浪动效需将按钮文字逐字符包裹span并动态设animation-delay，背景用CSS背景图平移实现，移动端需隔离波浪与涟漪动画、错开duration且监听touchstart。
按钮本身不能直接“起伏”，所谓波浪动效，本质是让按钮内部文字或背景产生连续、有节奏的垂直位移，不是整块按钮上下跳——这点搞错，后面全白搭。
button 里文字怎么波浪起伏
必须把每个字符包进 <span>，否则 nth-child 会因空格、换行、JS 插入的节点而错位。实测 Safari iOS 上写满 15 条 nth-child(n) 规则，渲染直接抖动。
- 手动写
nth-child(1)到nth-child(20)是高危操作，只要按钮里混入<strong>或 CMS 输出的空格，序号就全偏 - 正确做法：用 JS 把
textContent拆成单字符数组，document.createElement('span')逐个包裹，再 append 到按钮内 - 每个
<span>创建后立刻设style.animationDelay = `${i * 0.07}s`，别等 DOM 插完再批量查 —— 快速滚动时会漏掉部分元素 - 动画曲线推荐
cubic-bezier(0.1, 0.5, 0.2, 1)，配合0.07s延迟差值，起伏连贯不抽搐
button 背景怎么做出波浪流动感
靠纯 CSS 移动背景图最稳，比 SVG 或 Canvas 更轻量、兼容性更好，尤其适合按钮尺寸固定的小区域。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 准备一张宽度足够（比如 2000px）、高度匹配按钮的波浪 PNG 或 SVG 图片
- 设按钮
background: url(wave.png) repeat-x，并加background-size: auto 100% - 用
animation: wave 4s linear infinite，关键帧只动background-position-x，别碰transform——后者在某些安卓 WebView 里掉帧 - 如果按钮宽高不固定，改用
clip-path+@keyframes动态调整 polygon 点坐标，但 IE 和旧版 Safari 不支持
移动端点击时怎么避免波浪和涟漪打架
波浪动效常配 hover，涟漪响应 click/touchstart；两者叠加容易卡顿或触发冲突，必须分层隔离。
立即学习“前端免费学习笔记（深入）”；
- 波浪文字用
will-change: transform提前告诉浏览器要动，但只加在<span>上，别加到 button 本体 - 涟漪元素必须设
pointer-events: none，否则会拦截后续 hover 状态 - 移动端监听
touchstart而非click，且加preventDefault()防止双击缩放干扰波浪动画 - 两个动画的 duration 错开：波浪循环用
2.5s，涟漪扩散用0.45s，避免同时重绘导致丢帧
真正难的不是写对第一行代码，而是内容动态加载后，还得保证每个字符的 <span> 顺序和延迟值严格对应——CMS 插入的 、JS 拼接的 HTML 片段、甚至用户粘贴带格式的文字，都会悄悄破坏这个节奏。
