こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「かわいいデザインを作りたい」「ちょっとした装飾を加えたい」と思ったときに、CSSでハートを作るのはいかがでしょうか？
CSSだけでハートの形を表現し、さらにホバーするとふわっと浮かび上がるアニメーションをつけることで、より魅力的なデザインにできます。
本記事では、CSSだけでハートを作る方法とホバー時のアニメーションの実装方法を解説します！
CSSだけでハートを作る方法
CSSの ::before と ::after 疑似要素 を活用することで、1つの div からハートを作ることが可能 です！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- div を回転させてハートの下部分を作る
- ::before と ::after を使って円を配置し、上部を作成
- 背景色を自由に変更でき、CSSだけで簡単に作れる
ホバーでハートがふわっと浮かぶアニメーション
次に、ハートをホバーするとふわっと浮かび上がるアニメーションを追加してみましょう！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- ホバーすると transform: translateY(-10px); で浮かび上がる
- box-shadow を追加し、立体感を演出
- CSSアニメーションを使うことでスムーズな動きを実現
まとめ
- CSSだけでハートの形を作るには ::before と ::after を活用
- ホバー時に transform と box-shadow を使ってふわっと浮かび上がらせる
- シンプルなコードでデザインを華やかにすることができる
CSSだけで簡単に作れるので、ぜひWebサイトの装飾に活用してみてください！
こんなお悩みありませんか？
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
集客できるWebサイトをお求めやすい価格で制作します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
