如何创建：动画搜索框
学习如何使用 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 表单