CSS 仿风扇悬停动画效果

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

CSS 风扇效果动画

🎯 任务

在这个项目中,你将学习:

  • 如何使用 CSS 变换旋转 div 元素
  • 如何缩放 div 元素以创建类似风扇的展开效果
  • 如何协调多个元素的旋转和缩放以实现所需的动画

🏆 成果

完成这个项目后,你将能够:

  • 使用 CSS 变换旋转和缩放元素
  • 使用 CSS 创建动态悬停效果
  • 协调多个元素的动画以实现特定的视觉效果

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") subgraph Lab Skills css/selectors -.-> lab-299847{{"`CSS 仿风扇悬停动画效果`"}} css/pseudo_classes -.-> lab-299847{{"`CSS 仿风扇悬停动画效果`"}} css/transitions -.-> lab-299847{{"`CSS 仿风扇悬停动画效果`"}} css/transformations -.-> lab-299847{{"`CSS 仿风扇悬停动画效果`"}} end

设置项目结构

首先,打开右侧的编辑器。你应该会在编辑器中看到两个文件 —— index.htmlstyle.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 度。

  1. 保存 style.css 文件。
  2. 返回浏览器并刷新页面。现在,当你将鼠标悬停在该元素上时,应该会看到类似风扇的效果。
悬停时的风扇效果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程