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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

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

div要素を回転させる

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

1. エディタで style.css ファイルを開きます。
2. 次の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度です。

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

まとめ

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