纯CSS实现叉号动画最稳方案是用单个空span元素配合::before和::after伪元素绘制两条斜线，通过绝对定位、等宽高、center原点旋转45deg与135deg精准交叉，并仅对transform和opacity做过渡。
直接用纯 CSS 实现叉号（×）动画，核心是控制两条斜线的生成、旋转和定位，不依赖 SVG 或图片。关键不是“画出叉”，而是让两条线从「三横」或「单元素」状态动态变成交叉形态。
用伪元素 ::before 和 ::after 画叉最稳
这是兼容性最好、代码最轻量的方式：用一个空 <span> 元素，靠两个伪元素分别渲染两条斜线。必须设置 position: absolute，否则无法精准重叠交叉。
- 两条线宽高要一致（比如
width: 40px; height: 4px），否则旋转后错位 -
::before旋转45deg，::after旋转135deg（或-45deg），才能形成标准叉号 - 必须加
transform-origin: center，否则旋转中心偏移，交叉点不准 - 过渡动画只写
transform和opacity，别写all，避免触发重排
三横 → 叉号的动画逻辑（汉堡菜单场景）
常见于移动端侧边栏开关，点击三条横线变成叉号。本质是三条 <span> 的位置与旋转变化，不是“画叉”，而是“重组”。
- 初始时：上中下三条线分别设
top: 0、top: 9px、top: 18px - 激活态（如加
.open类）：top全部归零，再用transform: rotate(±45deg)让上下两条线交叉 - 中间那条线通常设
opacity: 0或width: 0消失，不能留白缝 - 注意
transition要写在未激活态上，否则首次点击无动画
input[type="search"] 自带叉号清空按钮的隐藏与触发
H5 原生支持，但行为不一致：Chrome 显示叉号并可点击清空；IE/Edge 需用 ::-ms-clear；Firefox 不支持。不能靠 CSS 动画控制它的“出现”，只能监听 input 值变化来显隐自定义叉号。
立即学习“前端免费学习笔记（深入）”；
- 原生叉号样式无法修改颜色或大小，仅能隐藏：
input::-webkit-search-cancel-button { appearance: none; } - 想加动画？得自己实现：用
:valid + .clear控制自定义叉号显示，并用transform: scale()触发淡入缩放 - 注意
:valid依赖required属性，若不想校验，改用 JS 监听input事件判断值长度
SVG <path> 画叉适合复杂动效
当需要描边动画（比如线条逐帧画出）、颜色填充、或配合进度反馈时，SVG 更可控。但要注意路径 d 值需手动计算坐标，且 stroke-dasharray 动画依赖精确的总长度。
- 两条线建议拆成两个
<path>，方便单独控制动画延迟和方向 - 用
transform: rotate(45deg)移动整个<g>组比旋转单个<line>更稳妥 - IE 不支持
stroke-dashoffset动画，需降级为 opacity fade 或直接不支持
真正容易被忽略的是 transform 原点和伪元素的层叠上下文——很多“叉没对齐”“动画卡顿”问题，都出在这两处。动手前先用 DevTools 检查 transform-origin 是否落在交叉中心，再确认父容器没意外触发 will-change 或 overflow: hidden 截断动画。
