CSS で見事な扇のようなホバーアニメーションを作成する

はじめに

このプロジェクトでは、CSS を使って扇のようなエフェクトを作成する方法を学びます。一連の div 要素を回転させて拡大縮小することで、ユーザーが要素にホバーしたときに拡大する、ダイナミックで視覚的に魅力的なアニメーションを実現できます。

👀 プレビュー

CSS fan effect animation

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

CSS 変換を使って div 要素を回転させる方法
扇のような拡大エフェクトを作成するために div 要素を拡大縮小する方法
複数の要素の回転と拡大縮小を調整して、目的のアニメーションを実現する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

CSS 変換を使って要素を回転させて拡大縮小する
CSS を使ってダイナミックなホバーエフェクトを作成する
特定の視覚的なエフェクトを実現するために、複数の要素のアニメーションを調整する

プロジェクト構造を設定する

始めるには、右のエディタを開きます。エディタから index.html と style.css の 2 つのファイルが見えるはずです。

右下の「Go Live」をクリックしてポート 8080 を開き、ブラウザで index.html ページをプレビューします。マウスを要素の上に置いても要素は拡大せず、以下のようなエフェクトになります。

unfinished hover effect preview

div 要素を回転させる

このステップでは、ページ上の 12 個の div 要素を回転させて扇のようなエフェクトを作成する方法を学びます。

エディタで style.css ファイルを開きます。
次の CSS ルールをファイルに追加します。

#box:hover div:nth-child(6) {
  transform: rotate(-10deg);
}

#box:hover div:nth-child(5) {
  transform: rotate(-20deg);
}

#box:hover div:nth-child(4) {
  transform: rotate(-30deg);
}

#box:hover div:nth-child(3) {
  transform: rotate(-40deg);
}

#box:hover div:nth-child(2) {
  transform: rotate(-50deg);
}

#box:hover div:nth-child(1) {
  transform: rotate(-60deg);
}

#box:hover div:nth-child(7) {
  transform: rotate(10deg);
}

#box:hover div:nth-child(8) {
  transform: rotate(20deg);
}

#box:hover div:nth-child(9) {
  transform: rotate(30deg);
}

#box:hover div:nth-child(10) {
  transform: rotate(40deg);
}

#box:hover div:nth-child(11) {
  transform: rotate(50deg);
}

#box:hover div:nth-child(12) {
  transform: rotate(60deg);
}

これらのルールは、最初の 6 つの div 要素（id="item1"~id="item6"）を時計回りに回転させ、最小回転角度は 10 度で、隣接する要素間の差分は 10 度です。次の 6 つの div 要素（id="item7"~id="item12"）は、時計回りに回転させ、最小回転角度は 10 度で、隣接する要素間の差分は 10 度です。

style.css ファイルを保存します。
ブラウザに戻り、ページを更新します。この時、要素にホバーしたときに扇のようなエフェクトが見られるはずです。

Fan effect on hover

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

CSS による扇のようなホバーアニメーションエフェクト