CSS 仿风扇悬停动画效果

介绍

在这个项目中，你将学习如何使用 CSS 创建类似风扇的效果。通过旋转和缩放一系列 div 元素，你将能够实现一个动态且视觉上吸引人的动画，当用户将鼠标悬停在该元素上时，它会展开。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 CSS 变换旋转 div 元素
• 如何缩放 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 中练习更多实验来提升你的技能。