如何创建：动画搜索框

学习如何使用 CSS 创建动画搜索表单。

点击输入字段：

如何创建动画搜索框

第一步 - 添加 HTML：

<input type="text" name="search" placeholder="Search..">

第二步 - 添加 CSS：

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* 当输入字段获得焦点时，将其宽度更改为 100% */
input[type=text]:focus {
  width: 100%;
}

직접 시도해 보세요

관련 페이지

강의:HTML 양식

강의:CSS 양식