2018年11月25日(日)
SVGでアニメーションしながら形状が遷移する検索フォーム
Result
See the Pen Search input animation by kachibito (@kachibito) on CodePen.
よくあるサーチアイコンからnput要素の下線に遷移する、みたいなのcss
.search input { background: none; border: none; outline: none; width: 28px; min-width: 0; padding: 0; z-index: 1; position: relative; line-height: 18px; margin: 5px 0; font-size: 14px; -webkit-appearance: none; font-family: "Mukta Malar"; transition: all 0.6s ease; cursor: pointer; color: #fff; } .search input + div { position: relative; height: 28px; width: 100%; margin: -28px 0...
0
17
6
32author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Photoshop最新の機能をもっと活用できるチュートリアル75種「75 Best Photoshop tutorials from 2018」
NEXT ›
グラフィカルな背景: モバイルUI/UX の６つのトレンド
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『SVGでアニメーションしながら形状が遷移する検索フォーム』についてまとめています。
この記事は特にアニメーション・jQuery・アイコン・SVG・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
