Эффект анимации наведения курсора, похожий на вентилятор, с использованием CSS

Введение

В этом проекте вы научитесь создавать эффект, похожий на вентилятор, с использованием CSS. Поворачивая и масштабируя серию элементов div, вы сможете достичь динамичной и визуально привлекательной анимации, которая расширяется при наведении курсора мыши на элемент.

👀 Превью

🎯 Задачи

В этом проекте вы научитесь:

• Поворачивать элементы div с использованием трансформаций CSS
• Масштабировать элементы div для создания эффекта расширения, похожего на вентилятор
• Координировать вращение и масштабирование нескольких элементов, чтобы достичь желаемой анимации

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать трансформации CSS для вращения и масштабирования элементов
• Создавать динамические эффекты наведения курсора мыши с использованием CSS
• Координировать анимацию нескольких элементов, чтобы достичь определенного визуального эффекта

Настройка структуры проекта

Для начала работы откройте редактор с правой стороны. Вы должны увидеть два файла — index.html и style.css в вашем редакторе.

Нажмите кнопку "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, чтобы улучшить свои навыки.