Efeito de Animação Hover em CSS Tipo Leque

Introdução

Neste projeto, você aprenderá como criar um efeito de leque usando CSS. Ao rotacionar e escalar uma série de elementos div, você conseguirá obter uma animação dinâmica e visualmente atraente que se expande quando o usuário passa o mouse sobre o elemento.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como rotacionar elementos div usando transformações CSS
• Como escalar elementos div para criar o efeito de expansão em leque
• Como coordenar a rotação e a escala de múltiplos elementos para obter a animação desejada

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar transformações CSS para rotacionar e escalar elementos
• Criar efeitos de hover dinâmicos usando CSS
• Coordenar a animação de múltiplos elementos para obter um efeito visual específico

Configurar a Estrutura do Projeto

Para começar, abra o editor à direita. Você deve ver dois arquivos — index.html e style.css no seu editor.

Clique em "Go Live" no canto inferior direito para abrir a porta 8080 e visualizar a página index.html no navegador. O elemento não se expandirá quando o mouse estiver sobre ele; o efeito será o seguinte:

Rotacionar as Divs

Nesta etapa, você aprenderá como rotacionar os 12 elementos div na página para criar o efeito de leque.

1. Abra o arquivo style.css no seu editor.
2. Adicione as seguintes regras CSS ao arquivo:

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

Essas regras rotacionam os primeiros 6 elementos div (id="item1"~id="item6") no sentido anti-horário com um ângulo de rotação mínimo de 10 graus e uma diferença de 10 graus entre elementos adjacentes. Os próximos 6 elementos div (id="item7"~id="item12") são rotacionados no sentido horário com uma rotação mínima de 10 graus e uma diferença de 10 graus entre elementos adjacentes.

3. Salve o arquivo style.css.
4. Volte para o navegador e atualize a página. Agora você deve ver o efeito de leque quando passar o mouse sobre o elemento.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.