方法-アニメーション検索フォーム
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;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
ヒント: HTMLフォームの詳細については、 HTMLフォームチュートリアルにアクセスしてください。
HTMLフォームのスタイルを設定する方法の詳細については、 CSSフォームチュートリアルにアクセスしてください。