如何創建：動畫搜索框
學習如何使用 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 表單
