web蓝桥杯-展开你的扇子

Posted 2022-05-03 算法与编程之美

一、引言

在第十三届蓝桥杯大赛第一次出现web应用开发题目，是对web应用开发技术的考验。网站为了让内容显示不臃肿，可以做一个折叠展开的效果，本题将使用css3实现元素呈扇形展开的效果。

二、题目

在浏览器中预览index.html页面，鼠标悬浮在元素上，元素不会展开，效果如下

三、目标

完善css/style.css文件，当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下：

具体说明如下：

页面上有12个相同大小的div元素

这12个div元素具有不同的背景颜色

前6个div元素均为顺时针移动，其最小转动角度为10deg，相邻元素间的角度差为10deg

后6个div元素均为逆时针移动，其最小转动角度为10deg，相邻元素间的角度差为10deg

注意，元素6和元素7，各自反方向转动10deg，所以它们之间的角度差为20deg

四、实验结果与讨论

1. 前期准备工作

   1. css3中的2D转换

Transfrom	适用于2D或3D转换的元素
rotate(angle)	定义2D旋转，在参数中规定角度。

2.实现功能

使卡片按照顺时针或是逆时针旋转一定的角度，则需要用到rotate函数来实现这一功能。

根据题意，前六张卡片中，第一张卡片需要逆时针旋转60deg，每两张相差10deg。

后六张卡片中，也就是第七张卡片需要顺时针旋转10deg，因为前六张卡片和后六张卡片之间相差20deg。后面每一张卡片之间相差10deg。

#box:hover>#item1    transform: rotate(-60deg);

#box:hover>#item7    transform: rotate(10deg);

3完整实验代码

/*TODO：请补充 CSS 代码*/ #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>#item7    transform: rotate(10deg); #box:hover>#item8    transform: rotate(20deg); #box:hover>#item9    transform: rotate(30deg); #box:hover>#item10    transform: rotate(40deg); #box:hover>#item11    transform: rotate(50deg); #box:hover>#item12    transform: rotate(60deg);

五、结语

本题在web蓝桥杯应用开发中是第二题，难易程度是简单，主要是对css3掌握成度的一个测验。对其中transfrom中rotete属性的重点应用，注意角度的偏转以及顺时针或是逆时针的方向问题。还有就是读清题意，能最快找到需求，完成功能实现。

稿件来源：深度学习与文旅应用实验室（DLETA） 

---

作者：巨金玲

主编：欧洋