CSSで使えるすごい検索Boxをまとめてみました！
codepenから引用しています
すごいCSS検索BOX コピペで実装 その1
今回はすごい検索BOXを集めました！
おもしろいものやすごいものを集めたのでぜひコピペで実装してみてください！
虫眼鏡のガラス部分が…
３本線が矢印に変化
See the Pen
Search Animation by Dan Root (@danroot)
on CodePen.
バツボタンに変化！
虫眼鏡がバツボタンに変化する
See the Pen
Search Form by Andrias (@poporetto)
on CodePen.
さりげなくアニメーション
虫眼鏡のレンズがサーチに変化
See the Pen
Animated Search Form With Micro Interactions | #2 by Himalaya Singh (@himalayasingh)
on CodePen.
分裂！
アイコンが分裂してサーチが出現
See the Pen
Search by Aaron Taylor (@BeanBaag)
on CodePen.
まるっと
周りの丸がサーチバーに変化
See the Pen
Search input focus animation by Nicolás J Engler (@nicolasjengler)
on CodePen.
転がる虫眼鏡
サーチが出現後虫眼鏡がころころ・・・
See the Pen
Search Form Animation by Aleksandar Čugurović (@choogoor)
on CodePen.
フルスクリーン検索ボックス
アイコンをタップすると画面全体がサーチに！バツボタンの動きも可愛い
See the Pen
Animated Search Box by Chouaib Blgn (@elmanifico45)
on CodePen.
カプセルサーチボックス
丸がカプセル状に変化
See the Pen
Search Transformation by Kaal (@hecalu)
on CodePen.
鮮やかな色とアニメーション
クリックすると四角が出現
See the Pen
CSS Search Box by Jamie Coulter (@jcoulterdesign)
on CodePen.
そこかっ！！笑
aの部分がサーチに！
See the Pen
Animated Search by Chris Gannon (@chrisgannon)
on CodePen.
すりガラスの中で
虫眼鏡がバーになるとともにすりガラスが出現！
See the Pen
Search box animation by Denis Pasko (@indaFaust)
on CodePen.
向きをチェンジしたあとは
虫眼鏡の向きが変わってボックスが出現し虫眼鏡のアイコンも登場！
See the Pen
Animated Search form by Kyosuke (@ky0suke)
on CodePen.
なんでもない丸から
白い丸がサーチに変化！
See the Pen
Expanding search field by Mads Håkansson (@madshaakansson)
on CodePen.
グラデーション！
丸が四角に変化しサーチボックスに！
See the Pen
Search bar animation by Milan Milošev (@MilanMilosev)
on CodePen.
サーチカード
カーソルを合わせるとサーチボックスが出現
See the Pen
CSS only slide out search bar by arthurra (@arthurra)
on CodePen.
フルスクリーン検索ボックス②
アイコンをタップすると画面全体がサーチに！通常の画面のデザインも可愛い
See the Pen
Material Fullscreen Search Transition by Luca Dimola (@hone)
on CodePen.
どれがお好み？
色々なパターンのサーチボックス集
See the Pen
CSS Animated Search Box Concepts by Brandon Kennedy (@brandonkennedy)
on CodePen.
検索のトップ表示にできます！
Googleの新機能を堪能しませんか？
いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました
2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです！
『すべて無料』で始められます！
