如何创建 - 动画搜索表单
了解如何使用CSS创建动画搜索表单。
如何创建动画搜索表单
点击输入框:
步骤 1) 添加 HTML:
实例
<input type="text" name="search" placeholder="Search..">
步骤 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 表单样式的信息。
