如何 - 动画搜索表单
学习如何使用 CSS 创建动画搜索表单。
如何创建动画搜索表单
单击输入字段
步骤 1) 添加 HTML
示例
<input type="text" name="search" placeholder="搜索..">
步骤 2) 添加 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 表单教程，了解更多关于 HTML 表单的信息。
访问我们的 CSS 表单教程，了解更多关于如何设置 HTML 表单样式的信息。
