2018年11月25日(日)

SVGでアニメーションしながら形状が遷移する検索フォーム

• 0
• 17
• 6
• 32

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...