展开你的扇子
介绍
网站上为了让内容显示不臃肿，我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1
2
3
4
| ├── css
│ └── style.css
├── effect.gif
└── index.html
|
其中：
css/style.css 是样式文件。effect.gif 是最终实现的效果图。index.html 是主页面。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
1
2
| 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 文件中已给出的代码。
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。
判分标准
总通过次数: 2029 | 总提交次数: 2013 | 通过率: 100%
难度: 中等 标签: 2022, 省赛, Web 前端, HTML5, CSS3
题解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| #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;
}
#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));
}
|
