网站上为了让内容显示不臃肿,我们可以做一个折叠展开的效果。本题将使用 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 图片)。
具体说明如下:
div
元素。div
元素具有不同的背景颜色。div
元素(id="item1"~id="item6"
)均为逆时针转动,其最小转动的角度为 10 deg
,相邻元素间的角度差为 10 deg
。div
元素(id="item7"~id="item12"
)均为顺时针转动,其最小转动的角度为 10 deg
,相邻元素间的角度差为 10 deg
。id="item6"
)和元素 7(id="item7"
),各自反方向转动 10 deg
,所以它们之间的角度差为 20 deg
。index.html
文件中的任何内容。css/style.css
文件中已给出的代码。/*style.css*/
#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(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);
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>展开你的扇子</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div id="box">
<!--元素 1-->
<div id="item1">1</div>
<!--元素 2-->
<div id="item2">2</div>
<!--元素 3-->
<div id="item3">3</div>
<!--元素 4-->
<div id="item4">4</div>
<!--元素 5-->
<div id="item5">5</div>
<!--元素 6-->
<div id="item6">6</div>
<!--元素 7-->
<div id="item7">7</div>
<!--元素 8-->
<div id="item8">8</div>
<!--元素 9-->
<div id="item9">9</div>
<!--元素 10-->
<div id="item10">10</div>
<!--元素 11-->
<div id="item11">11</div>
<!--元素 12-->
<div id="item12">12</div>
</div>
</body>
</html>
代码功能概述
这段 HTML 代码构建了一个简单的网页结构,主要目的是创建一个包含 12 个 div
元素的容器,这些 div
元素将用于实现扇子展开的效果。
详细解释
<!DOCTYPE html>
:声明文档类型为 HTML5。<meta charset="UTF-8" />
:设置字符编码为 UTF - 8,确保页面能正确显示各种字符。<meta http-equiv="X-UA-Compatible" content="IE=edge" />
:指定页面在 Internet Explorer 中以最新的渲染模式显示。<meta name="viewport" content="width=device-width, initial-scale=1.0" />
:设置视口属性,使页面在不同设备上能自适应显示。<title>展开你的扇子</title>
:设置网页的标题,显示在浏览器的标签栏上。<link rel="stylesheet" href="./css/style.css" />
:引入外部 CSS 文件 style.css
,用于为页面元素添加样式。<div id="box">
:作为 12 个 div
元素的容器,通过 id
为 box
进行标识,方便在 CSS 中进行样式设置。<div>
元素:每个 div
元素都有唯一的 id
(从 item1
到 item12
),内部包含一个数字文本,用于表示元素的序号。这些 div
元素将在 CSS 的控制下实现扇形展开的效果。整体功能
CSS 代码主要负责为 HTML 元素添加样式,通过设置元素的大小、位置、背景颜色、过渡效果和旋转角度等属性,实现鼠标悬停时元素呈扇形展开的效果。
详细解释
1. 容器样式
width: 300px;
和 height: 440px;
:设置 #box
容器的宽度为 300 像素,高度为 440 像素。margin: 100px auto;
:使容器在垂直方向上距离顶部 100 像素,在水平方向上居中显示。position: relative;
:将容器的定位方式设置为相对定位,为子元素的绝对定位提供参考。2. 元素背景颜色设置
#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;
}
为不同的元素设置了不同的背景颜色,增强视觉效果。例如,#item1
和 #item12
的背景颜色为 #90e0ef
。
3. 子元素通用样式
#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;
}
width: 100%;
和 height: 400px;
:设置 #box
内所有 div
元素的宽度为容器宽度的 100%,高度为 400 像素。transition: all 1.5s;
:为元素的所有属性变化添加 1.5三、工作流程 ▶️ 1. 页面加载
id
为 box
的 div
容器,以及 12 个分别带有 id
从 item1
到 item12
的子 div
元素,每个子元素内部包含一个数字文本用于标识。<link>
标签引入外部 CSS 文件 style.css
,并开始解析 CSS 代码。将 CSS 样式规则应用到对应的 HTML 元素上,完成页面的初步渲染。2. 初始状态呈现
#box
容器根据 CSS 规则,宽度被设置为 300px,高度为 440px,且在页面中垂直方向距离顶部 100px,水平方向居中显示。其定位方式为相对定位,为后续子元素的绝对定位提供参考。#box
内的 12 个子 div
元素按照 CSS 规则进行样式设置。它们的宽度为容器宽度的 100%,高度为 400px,初始位置都位于容器的左上角(left: 0; top: 0;
)。同时,这些元素的背景颜色根据各自的 id
组合被赋予不同的值,并且每个元素都添加了过渡效果(transition: all 1.5s;
),这意味着元素的任何属性变化都会在 1.5 秒内平滑过渡。此外,旋转原点被设置为元素底部的中心(transform - origin: center bottom;
),还添加了一个轻微的阴影效果(box - shadow: 0 0 3px 0 #666;
)。3. 鼠标交互触发
#box
容器上时,浏览器会监测到这个悬停事件。这是基于 CSS 中的 :hover
伪类选择器实现的,#box:hover
表示当鼠标悬停在 #box
元素上时应用相应的样式规则。4. 元素旋转展开
#box
上时,#box:hover div:nth - child(n)
(n
从 1 到 6)选择器会选中前 6 个子元素,并为它们添加旋转效果。#box:hover div:nth - child(1)
对应的元素会逆时针旋转 60°,#box:hover div:nth - child(2)
对应的元素逆时针旋转 50°,以此类推,#box:hover div:nth - child(6)
对应的元素逆时针旋转 10°。相邻元素间的旋转角度差为 10°。#box:hover div:nth - child(n)
(n
从 7 到 12)选择器会选中后 6 个子元素。#box:hover div:nth - child(7)
对应的元素会顺时针旋转 10°,#box:hover div:nth - child(8)
对应的元素顺时针旋转 20°,依此类推,#box:hover div:nth - child(12)
对应的元素顺时针旋转 60°。相邻元素间的旋转角度差也是 10°,而元素 6 和元素 7 由于旋转方向相反,它们之间的角度差为 20°。transition: all 1.5s;
),元素的旋转操作不会瞬间完成,而是在 1.5 秒内平滑地从初始状态过渡到旋转后的状态,从而呈现出扇形展开的动画效果。5. 鼠标移开恢复
#box
容器上移开时,悬停事件结束。此时,元素会根据过渡效果规则,在 1.5 秒内平滑地恢复到初始状态,即所有子元素回到原来的位置和角度,等待下一次鼠标悬停事件的触发。