蓝桥杯2022web省赛赛题题解-02

最新推荐文章于 2024-10-01 21:51:05 发布

Veilhry

最新推荐文章于 2024-10-01 21:51:05 发布

阅读量153

点赞数

分类专栏：蓝桥杯web 文章标签： css3

本文链接：https://blog.csdn.net/weixin_46439063/article/details/124116570

版权

蓝桥杯web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

该博客介绍了如何使用CSS3的transform属性实现网页元素在鼠标悬停时呈扇形展开的效果。通过设置不同角度的rotate函数，实现了12个div元素按逆时针和顺时针方向依次旋转，创建出独特的视觉展示。

摘要由CSDN通过智能技术生成

蓝桥杯2022web省赛赛题题解-02

完整代码见GitHub：github.com/Veilhry/lanqiaoweb/tree/master/02

展开你的扇子

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

初始效果

鼠标悬浮至元素上，元素不会展开。

在这里插入图片描述

目标
当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下所示:

在这里插入图片描述

具体说明如下:

页面上有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。

题解

这里主要是考察transform属性的使用，旋转变化的函数为rotate(angle)传入需要旋转的角度即可，正值为顺时针，负值为逆时针旋转，默认旋转以原点(元素中心)为基准。


/*TODO：请补充 CSS 代码*/
#box:hover div:nth-child(1){
  transform: rotate(-60deg);
}
#box:hover div:nth-child(2){
  transform: rotate(-50deg);
}
#box:hover div:nth-child(3){
  transform: rotate(-40deg);
}
#box:hover div:nth-child(4){
  transform: rotate(-30deg);
}
#box:hover div:nth-child(5){
  transform: rotate(-20deg);
}
#box:hover div:nth-child(6){
  transform: rotate(-10deg);
}
#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);
}