【CSS——效果实现】展开你的扇子（蓝桥杯真题-2449）【合集】

Rossy Yan

发布于 2025-02-07 12:29:01

5400

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

网站上为了让内容显示不臃肿，我们可以做一个折叠展开的效果。本题将使用 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 分。

通关代码✔️

/*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);
}

代码解析📑

一、HTML 部分

//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 中进行样式设置。
- 12 个 <div> 元素：每个 div 元素都有唯一的 id（从 item1 到 item12），内部包含一个数字文本，用于表示元素的序号。这些 div 元素将在 CSS 的控制下实现扇形展开的效果。

二、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. 页面加载

HTML 结构搭建：浏览器首先解析 HTML 代码，构建文档对象模型（DOM）。在这个过程中，创建一个具有 id 为 box 的 div 容器，以及 12 个分别带有 id 从 item1 到 item12 的子 div 元素，每个子元素内部包含一个数字文本用于标识。
CSS 样式加载：浏览器根据 HTML 中的 <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. 元素旋转展开

前 6 个元素逆时针旋转：根据 CSS 规则，当鼠标悬停在 #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°。
后 6 个元素顺时针旋转：同样在鼠标悬停时，#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 秒内平滑地从初始状态过渡到旋转后的状态，从而呈现出扇形展开的动画效果。