前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >【CSS——效果实现】展开你的扇子(蓝桥杯真题-2449)【合集】

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

作者头像
Rossy Yan
发布2025-02-07 12:29:01
发布2025-02-07 12:29:01
5400
代码可运行
举报
运行总次数:0
代码可运行

背景介绍

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

准备步骤

本题已经内置了初始代码,打开实验环境,目录结构如下:

代码语言:javascript
代码运行次数:0
运行
复制
├── css
│   └── style.css
├── effect.gif
└── index.html

其中:

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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 分。

通关代码✔️

代码语言:javascript
代码运行次数: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 部分

代码语言:javascript
代码运行次数:0
运行
复制
//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 元素将用于实现扇子展开的效果。

详细解释

  1. 头部信息
    • <!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,用于为页面元素添加样式。
  2. 主体内容
    • <div id="box">:作为 12 个 div 元素的容器,通过 idbox 进行标识,方便在 CSS 中进行样式设置。
    • 12 个 <div> 元素:每个 div 元素都有唯一的 id(从 item1item12),内部包含一个数字文本,用于表示元素的序号。这些 div 元素将在 CSS 的控制下实现扇形展开的效果。

二、CSS 部分

整体功能

CSS 代码主要负责为 HTML 元素添加样式,通过设置元素的大小、位置、背景颜色、过渡效果和旋转角度等属性,实现鼠标悬停时元素呈扇形展开的效果。

详细解释

1. 容器样式

  • width: 300px;height: 440px;:设置 #box 容器的宽度为 300 像素,高度为 440 像素。
  • margin: 100px auto;:使容器在垂直方向上距离顶部 100 像素,在水平方向上居中显示。
  • position: relative;:将容器的定位方式设置为相对定位,为子元素的绝对定位提供参考。

2. 元素背景颜色设置

代码语言:javascript
代码运行次数:0
运行
复制
#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. 子元素通用样式

代码语言:javascript
代码运行次数:0
运行
复制
#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)。在这个过程中,创建一个具有 idboxdiv 容器,以及 12 个分别带有 iditem1item12 的子 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 秒内平滑地从初始状态过渡到旋转后的状态,从而呈现出扇形展开的动画效果。

5. 鼠标移开恢复

  • 状态还原:当用户将鼠标指针从 #box 容器上移开时,悬停事件结束。此时,元素会根据过渡效果规则,在 1.5 秒内平滑地恢复到初始状态,即所有子元素回到原来的位置和角度,等待下一次鼠标悬停事件的触发。

测试结果👍

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景介绍
  • 准备步骤
  • 目标效果
  • 要求规定
  • 判分标准
  • 通关代码✔️
  • 代码解析📑
    • 一、HTML 部分
    • 二、CSS 部分
  • 测试结果👍
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档