アニメーション検索ボックスの作成方法：
- 前のページ テキストをクリップボードにコピーする方法
- 次のページ 検索ボタン
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フォーム
チュートリアル：CSSフォーム
- 前のページ テキストをクリップボードにコピーする方法
- 次のページ 検索ボタン
