如何使用CSS实现搜索框点击后宽度向左平滑展开动画-css教程-PHP中文网

搜索框向左展开动画核心是width与transform: translatex()协同：收起态width=40px、translatex(0)，聚焦时width=240px、translatex(-100px)，配合padding-left变化和统一transition，实现以光标为锚点的向左伸展效果。

如何使用css实现搜索框点击后宽度向左平滑展开动画

搜索框点击后向左展开的动画原理

核心在于用 :focus 触发状态变化，配合 transition 控制宽度与 transform: translateX() 补偿位移。单纯改 width 会导致右侧固定、左侧“挤入”，而向左展开需要视觉上从光标位置向左延伸——这必须靠位移抵消宽度增长带来的右移偏移。

HTML 结构要避免 inline-block 或浮动干扰

常见错误是把搜索框放在 float: left 的导航栏里，或用 display: inline-block 包裹，导致 transform 失效或布局错乱。推荐用 flex 容器控制对齐：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
</div>

对应 CSS 中 .search-container 设为 display: flex，.search-input 设为 flex: 0 0 auto（初始不占满），再通过 width 控制收起态尺寸。

关键 CSS 属性组合与取值逻辑

动画是否自然，取决于三个属性是否协同：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

width：收起态设为固定小值（如 40px），聚焦时设为较大值（如 240px）
padding-left：收起态设为 0，聚焦时设为足够容纳图标+文字的值（如 32px），避免文字被裁切
transform: translateX()：收起态为 translateX(0)；聚焦时需向左平移 width 增量的一半左右（例如从 40px → 240px，增量 200px，则设 translateX(-100px)），让输入框中心大致不动，实现“以光标为锚点向左伸展”效果
所有过渡必须写在基础选择器上（如 .search-input），而非只写在 :focus 里，否则失去反向收起动画

完整示例片段：

.search-input {
  width: 40px;
  padding-left: 0;
  transform: translateX(0);
  transition: width 0.3s ease, padding-left 0.3s ease, transform 0.3s ease;
  border: none;
  background: #f0f0f0;
  outline: none;
}
.search-input:focus {
  width: 240px;
  padding-left: 32px;
  transform: translateX(-100px);
}