当前位置: 首页 > news >正文

蓝桥杯 web 展开你的扇子(css3)


普通答案:

#box:hover #item1{transform: rotate(-60deg);
}
#box:hover #item2{transform: rotate(-50deg);
}
#box:hover #item3{transform: rotate(-40deg);
}
#box:hover #item4{transform: rotate(-30deg);
}
#box:hover #item5{transform: rotate(-20deg);
}
#box:hover #item6{transform: rotate(-10deg);
}
#box:hover #item12{transform: rotate(60deg);
}
#box:hover #item11{transform: rotate(50deg);
}
#box:hover #item10{transform: rotate(40deg);
}
#box:hover #item9{transform: rotate(30deg);
}
#box:hover #item8{transform: rotate(20deg);
}
#box:hover #item7{transform: rotate(10deg);
}

1. 选择器解析

#box:hover #item6 {transform: rotateZ(-10deg);
}
(1) #box:hover
  • #box 是一个 ID 选择器,表示选中 HTML 中 id="box" 的元素。
  • :hover 是一个伪类,表示当用户将鼠标悬停在该元素上时应用样式。
  • #box:hover 的意思是:当鼠标悬停在 id="box" 的元素上时,触发相关的样式规则。
(2) #item6
  • #item6 是另一个 ID 选择器,表示选中 HTML 中 id="item6" 的元素。
  • #box:hover #item6 表示:当鼠标悬停在 #box 上时,选中 #box 内部的 #item6 元素。

2. 样式规则

transform: rotateZ(-10deg);
(1) transform 属性
  • transform 是一个 CSS 属性,用于对元素进行变换操作(如旋转、缩放、移动等)。
  • 在这里,transform 被用来对 #item6 进行旋转。
(2) rotateZ(-10deg)
  • rotateZ 是 transform 的一个函数,表示围绕 Z 轴旋转。
  • -10deg 表示逆时针旋转 10 度(负值为逆时针,正值为顺时针)。
  • 因此,rotateZ(-10deg) 的意思是:让 #item6 元素围绕 Z 轴逆时针旋转 10 度。

 如果你不指定旋转轴(如 rotateX, rotateY, 或 rotateZ),则默认是围绕 Z 轴进行旋转。这意味着单独使用 rotate 实际上等同于 rotateZ


扩展:js 做法

box.onmouseover = () => { 
for(let i = 1; i <=6; i++ ) {
let item = document.querySelector(`#item${i}`) item.style.transform = `rotate(${-60+(i-1)*10}deg)`
console.log(item) } for(let i = 7; i <=12; i++ ) {
let item = document.querySelector(`#item${i}`) item.style.transform = `rotate(${(i-6)*10}deg)` 
console.log(item) }

代码逐行解析

1. box.onmouseover = () => { ... }
  • 这是一个事件绑定,表示当用户将鼠标悬停在 box 元素上时,执行后面的箭头函数。
  • onmouseover 是原生 DOM 的事件属性,类似于 addEventListener('mouseover', ...)
2. 第一个 for 循环
for (let i = 1; i <= 6; i++) {let item = document.querySelector(`#item${i}`);item.style.transform = `rotate(${-60 + (i - 1) * 10}deg)`;console.log(item);
}
(1) for (let i = 1; i <= 6; i++)
  • 循环从 i = 1 开始,到 i = 6 结束,总共循环 6 次。
  • 每次循环处理一个 #itemX 元素(#item1 到 #item6)。
(2) let item = document.querySelector(#item${i})
  • 使用模板字符串 `#item${i}` 动态生成选择器,例如:
    • 当 i = 1 时,选择器为 #item1
    • 当 i = 2 时,选择器为 #item2
  • document.querySelector 返回匹配该选择器的第一个 DOM 元素。
(3) item.style.transform = rotate(${-60 + (i - 1) * 10}deg)``
  • 设置 item 元素的 transform 样式,使其旋转一定的角度。
  • -60 + (i - 1) * 10 是一个数学表达式,用于计算旋转角度:
    • 当 i = 1 时:-60 + (1 - 1) * 10 = -60,即旋转 -60deg
    • 当 i = 2 时:-60 + (2 - 1) * 10 = -50,即旋转 -50deg
    • 当 i = 3 时:-60 + (3 - 1) * 10 = -40,即旋转 -40deg
    • 以此类推,直到 i = 6 时,旋转角度为 -10deg
(4) console.log(item)
  • 打印当前处理的 item 元素,方便调试和查看是否正确选择了目标元素。
3. 第二个 for 循环
for (let i = 7; i <= 12; i++) {let item = document.querySelector(`#item${i}`);item.style.transform = `rotate(${(i - 6) * 10}deg)`;console.log(item);
}
(1) for (let i = 7; i <= 12; i++)
  • 循环从 i = 7 开始,到 i = 12 结束,总共循环 6 次。
  • 每次循环处理一个 #itemX 元素(#item7 到 #item12)。
(2) let item = document.querySelector(#item${i})
  • 同第一个循环,动态生成选择器并获取对应的 DOM 元素。
(3) item.style.transform = rotate(${(i - 6) * 10}deg)``
  • 设置 item 元素的 transform 样式,使其旋转一定的角度。
  • (i - 6) * 10 是一个数学表达式,用于计算旋转角度:
    • 当 i = 7 时:(7 - 6) * 10 = 10,即旋转 10deg
    • 当 i = 8 时:(8 - 6) * 10 = 20,即旋转 20deg
    • 当 i = 9 时:(9 - 6) * 10 = 30,即旋转 30deg
    • 以此类推,直到 i = 12 时,旋转角度为 60deg
(4) console.log(item)
  • 同第一个循环,打印当前处理的 item 元素。

http://www.mrgr.cn/news/97432.html

相关文章:

  • 通过ansible+docker-compose快速安装一主两从redis+三sentinel
  • Gateway 网关 快速开始
  • verilog学习--1、语言要素
  • 【大模型深度学习】如何估算大模型需要的显存
  • C# 与 相机连接
  • 使用python-pptx操作PowerPoint文档详解
  • Django接入 免费的 AI 大模型——讯飞星火(2025年4月最新!!!)
  • 十、C++速通秘籍—多进程
  • Java八股文-List集合
  • 量子计算入门:Qiskit实战量子门电路设计
  • 【QT】QT的多界面跳转以及界面之间传递参数
  • 【stm32--HAL库DMA+USART+空闲中断不定长收发数据】
  • py文件打包为exe可执行文件,涉及mysql连接失败以及找不到json文件
  • 时间梯度匹配损失 TGMLoss
  • 12.青龙面板自动化我的生活
  • 【MySQL】常用SQL--持续更新ing
  • 08RK3568 gpio模拟i2c 配置hym8563 RTC时钟
  • C++设计模式总结-汇总了全部23种设计模式的详细说明
  • 大语言模型在端到端智驾中的应用
  • 机器视觉3D中激光偏镜的优点