Efecto de animación al pasar el cursor similar a un abanico con CSS

Introducción

En este proyecto, aprenderás a crear un efecto similar a un abanico utilizando CSS. Al rotar y escalar una serie de elementos div, podrás lograr una animación dinámica y visualmente atractiva que se expande cuando el usuario pasa el cursor sobre el elemento.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo rotar elementos div utilizando transformaciones CSS
• Cómo escalar elementos div para crear el efecto de expansión similar a un abanico
• Cómo coordinar la rotación y la escala de múltiples elementos para lograr la animación deseada

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar transformaciones CSS para rotar y escalar elementos
• Crear efectos dinámicos al pasar el cursor utilizando CSS
• Coordinar la animación de múltiples elementos para lograr un efecto visual específico

Establece la estructura del proyecto

Para comenzar, abre el editor en la derecha. Deberías ver dos archivos: index.html y style.css en tu editor.

Haz clic en "Ir en vivo" en la esquina inferior derecha para abrir el puerto 8080 y previsualizar la página index.html en el navegador. El elemento no se expandirá cuando el mouse esté sobre él. El efecto será el siguiente:

Gira los elementos div

En este paso, aprenderás a rotar los 12 elementos div de la página para crear el efecto similar a un abanico.

1. Abre el archivo style.css en tu editor.
2. Agrega las siguientes reglas CSS al archivo:

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

Estas reglas giran los primeros 6 elementos div (id="item1"~id="item6") en sentido antihorario con un ángulo de rotación mínimo de 10 grados y una diferencia de 10 grados entre elementos adyacentes. Los siguientes 6 elementos div (id="item7"~id="item12") se rotan en sentido horario con una rotación mínima de 10 grados y una diferencia de 10 grados entre elementos adyacentes.

3. Guarda el archivo style.css.
4. Vuelve al navegador y actualiza la página. Ahora deberías ver el efecto similar a un abanico cuando pasas el cursor sobre el elemento.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.