Erstelle atemberaubende Fan-ähnliche Hover-Animation mit CSS

Einführung

In diesem Projekt lernst du, wie du mithilfe von CSS einen Ventilator-ähnlichen Effekt erzeugen kannst. Indem du eine Reihe von div-Elementen rotierst und skalierst, wirst du einen dynamischen und visuell ansprechenden Animation erzielen können, die sich erweitert, wenn der Benutzer über das Element fährt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du div-Elemente mit CSS-Transformationsfunktionen rotieren kannst
Wie du div-Elemente skalieren kannst, um den ventilator-ähnlichen Erweiterungseffekt zu erzeugen
Wie du die Rotation und Skalierung mehrerer Elemente koordinieren kannst, um die gewünschte Animation zu erreichen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

CSS-Transformationsfunktionen zum Rotieren und Skalieren von Elementen zu verwenden
Dynamische Hover-Effekte mit CSS zu erstellen
Die Animation mehrerer Elemente zu koordinieren, um einen bestimmten visuellen Effekt zu erzielen

Projektstruktur einrichten

Um loszulegen, öffnen Sie den Editor rechts. Sie sollten zwei Dateien sehen - index.html und style.css in Ihrem Editor.

Klicken Sie in der unteren rechten Ecke auf "Go Live", um Port 8080 zu öffnen und die index.html-Seite im Browser anzuschauen. Wenn die Maus darüber ist, wird das Element nicht erweitert. Der Effekt wird wie folgt aussehen:

Divs rotieren

In diesem Schritt lernst du, wie du die 12 div-Elemente auf der Seite rotierst, um den ventilator-ähnlichen Effekt zu erzeugen.

Öffne die Datei style.css in deinem Editor.
Füge die folgenden CSS-Regeln zur Datei hinzu:

#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);
}

Diese Regeln rotieren die ersten 6 div-Elemente (id="item1"~id="item6") im Uhrzeigersinn mit einem Mindestrotationswinkel von 10 Grad und einem Unterschied von 10 Grad zwischen benachbarten Elementen. Die nächsten 6 div-Elemente (id="item7"~id="item12") werden im Gegenuhrzeigersinn mit einer Mindestrotation von 10 Grad und einem Unterschied von 10 Grad zwischen benachbarten Elementen rotiert.

Speichere die Datei style.css.
Gehe zurück zum Browser und aktualisiere die Seite. Wenn du jetzt über das Element fährst, solltest du den ventilator-ähnlichen Effekt sehen.