Effet d'animation au survol ressemblant à un ventilateur en CSS

Introduction

Dans ce projet, vous allez apprendre à créer un effet ressemblant à un ventilateur à l'aide de CSS. En faisant tourner et agrandir une série d'éléments div, vous serez capable d'obtenir une animation dynamique et visuellement attrayante qui s'étend lorsqu'utilisateur survole l'élément.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment faire tourner des éléments div à l'aide de transformations CSS
• Comment agrandir des éléments div pour créer l'effet d'expansion ressemblant à un ventilateur
• Comment coordonner la rotation et l'agrandissement de plusieurs éléments pour obtenir l'animation souhaitée

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser les transformations CSS pour faire tourner et agrandir des éléments
• Créer des effets de survol dynamiques à l'aide de CSS
• Coordonner l'animation de plusieurs éléments pour obtenir un effet visuel spécifique

Configurer la structure du projet

Pour commencer, ouvrez l'éditeur situé à droite. Vous devriez voir deux fichiers - index.html et style.css dans votre éditeur.

Cliquez sur "Go Live" dans le coin inférieur droit pour ouvrir le port 8080 et prévisualiser la page index.html dans le navigateur. L'élément ne s'étendra pas lorsque la souris est au-dessus, l'effet sera le suivant :

Faire tourner les div

Dans cette étape, vous allez apprendre à faire tourner les 12 éléments div de la page pour créer l'effet ressemblant à un ventilateur.

1. Ouvrez le fichier style.css dans votre éditeur.
2. Ajoutez les règles CSS suivantes au fichier :

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

Ces règles font tourner les 6 premiers éléments div (id="item1"~id="item6") dans le sens inverse des aiguilles d'une montre avec un angle de rotation minimum de 10 degrés et une différence de 10 degrés entre les éléments adjacents. Les 6 éléments div suivants (id="item7"~id="item12") sont tournés dans le sens des aiguilles d'une montre avec une rotation minimale de 10 degrés et une différence de 10 degrés entre les éléments adjacents.

3. Enregistrez le fichier style.css.
4. Revenez au navigateur et rafraîchissez la page. Vous devriez maintenant voir l'effet ressemblant à un ventilateur lorsque vous survolez l'élément.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.