展开你的扇子

作者:江月迟迟

发表于:2024-12-10

字数统计:884 字

预计阅读3分钟

介绍

网站上为了让内容显示不臃肿，我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── effect.gif
└── index.html

其中：

• css/style.css 是样式文件。
• effect.gif 是最终实现的效果图。
• index.html 是主页面。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/02.zip && unzip 02.zip && rm 02.zip

在浏览器中预览 index.html 页面，鼠标悬浮在元素上，元素不会展开，效果如下：

目标

请完善 css/style.css 文件（请勿修改文件夹中已给出的代码，以免造成判题无法通过）。

当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下所示：

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

具体说明如下：

• 页面上有 12 个相同大小的 div 元素。
• 这 12 个 div 元素具有不同的背景颜色。
• 前 6 个 div 元素（id="item1"~id="item6"）均为逆时针转动，其最小转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 后 6 个 div 元素（id="item7"~id="item12"）均为顺时针转动，其最小转动的角度为 10 deg，相邻元素间的角度差为 10 deg。
• 注意，元素 6（id="item6"）和元素 7（id="item7"），各自反方向转动 10 deg，所以它们之间的角度差为 20 deg。

规定

• 请勿修改 index.html 文件中的任何内容。
• 请勿修改 css/style.css 文件中已给出的代码。
• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 2029 | 总提交次数: 2013 | 通过率: 100%

难度: 中等 标签: 2022, 省赛, Web 前端, HTML5, CSS3

题解

#box {
  width: 300px;
  height: 440px;
  margin: 100px auto;
  position: relative;
}

#item1,
#item12 {
  background-color: #90e0ef;
}
#item2,
#item8 {
  background-color: #8bdb81;
}
#item3,
#item10 {
  background-color: yellowgreen;
}
#item4,
#item6 {
  background-color: skyblue;
}
#item5,
#item9 {
  background-color: #d9d7f1;
}
#item7,
#item11 {
  background-color: #fed1f1;
}
#box div {
  width: 100%;
  height: 400px;
  transition: all 1.5s;
  position: absolute;
  left: 0;
  top: 0;
  /*旋转时，以盒子底部的中心为坐标原点*/
  transform-origin: center bottom;
  box-shadow: 0 0 3px 0 #666;
}
/*TODO：请补充 CSS 代码*/

#box:hover > div:nth-child(1) {
  transform: rotate(calc(-60deg));
}
#box:hover > div:nth-child(2) {
  transform: rotate(calc(-50deg));
}
#box:hover > div:nth-child(3) {
  transform: rotate(calc(-40deg));
}
#box:hover > div:nth-child(4) {
  transform: rotate(calc(-30deg));
}
#box:hover > div:nth-child(5) {
  transform: rotate(calc(-20deg));
}
#box:hover > div:nth-child(6) {
  transform: rotate(calc(-10deg));
}
#box:hover > div:nth-child(7) {
  transform: rotate(calc(10deg));
}
#box:hover > div:nth-child(8) {
  transform: rotate(calc(20deg));
}
#box:hover > div:nth-child(9) {
  transform: rotate(calc(30deg));
}
#box:hover > div:nth-child(10) {
  transform: rotate(calc(40deg));
}
#box:hover > div:nth-child(11) {
  transform: rotate(calc(50deg));
}
#box:hover > div:nth-child(12) {
  transform: rotate(calc(60deg));
}