如何制作CSS全屏搜索框的展开动画_利用clip-path: circle扩散-css教程-PHP中文网

clip-path: circle 动画比 transform 更适合全屏搜索框，因其真实裁剪内容、不触发重排、避免子元素模糊和层叠问题，且移动端更顺滑；但需精确指定圆心位置并处理兼容性与键盘弹出偏移。

如何制作css全屏搜索框的展开动画_利用clip-path: circle扩散

clip-path: circle 动画为什么比 transform 更适合全屏搜索框

因为 clip-path: circle() 能真正「裁剪」内容区域，动画过程中背景、遮罩、输入框都保持在同一个 stacking context 里，不会触发重排，也不会像 transform: scale() 那样导致子元素模糊或触发硬件加速层叠问题。尤其在移动端，clip-path 的扩散动画更顺滑、无闪烁。

但注意：clip-path 的动画不支持从 circle(0) 直接到 circle(100%) 这种跨尺寸起止——浏览器无法插值半径和圆心坐标同时变化，必须显式指定起始圆心位置，否则动画卡顿或直接跳变。

如何写出可复用的全屏搜索展开动画

关键不是写死 circle(0 at 50% 50%)，而是让圆心精准落在用户点击的位置（比如搜索图标），这样视觉上才是“从点击处炸开”。需要 JS 捕获坐标并注入到 style：

给触发按钮绑定 click 事件，用 getBoundingClientRect() 算出相对于视口的 x/y
将 x/y 转换为相对于搜索容器的百分比（如 left: x / window.innerWidth * 100 + '%'）
用 element.style.clipPath = 'circle(0 at ' + xPercent + '% ' + yPercent + '%)' 初始化
再通过 class 切换触发动画：添加 .is-expanded 类，其 clip-path: circle(120% at ...) 值需略大于 100%，确保全屏覆盖（因视口对角线 ≈ 141%）

示例 CSS：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

input.search-input {
  clip-path: circle(0 at 50% 50%);
  transition: clip-path 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input.search-input.is-expanded {
  clip-path: circle(141% at 50% 50%);
}