【HTML/CSS】Searchバーのアニメーション
ブログを作ってるんですが、検索バーをつけようと思い、少しアニメーションをつけてみました。
CSSでの実装となります。
1.検索バーをクリックするとバー自体の範囲が伸びる
2.placeholderで表示している文字をクリックした時に消す
今後も使いそうなので、備忘録として残しておきます。
クリックでバーの範囲を伸ばす
とっても簡単でした。
HTML
<input class="search" type="text" placeholder="Search">
.search{ width:100px; } .search:focus{ width: 120px; }
これでクリックされた後に横幅が広がります。
イメージとしてはクリック(focus)されたとどういう形にしたいかを設定するということですね。
ちなみにtransitionなどを設定すると時間をかけて広がるので、モダンな感じがします笑
placeholderの文字を消す
これも簡単でした。
CSS
.search:focus::placeholder{ color: transparent; }
これでクリック(focus)した時に消えてくれます。
class名:focus{} これは結構使えそうだなと思いました。
JavaScriptで実装するんだろうなと思ってたら、CSSで簡単にできたので、参考になる方がいれば幸いです。