web蓝桥杯-展开你的扇子
一、引言
在第十三届蓝桥杯大赛第一次出现web应用开发题目，是对web应用开发技术的考验。网站为了让内容显示不臃肿，可以做一个折叠展开的效果，本题将使用css3实现元素呈扇形展开的效果。
二、题目
在浏览器中预览index.html页面，鼠标悬浮在元素上，元素不会展开，效果如下
三、目标
完善css/style.css文件，当鼠标悬浮在元素上，元素呈扇形展开，页面效果如下：
具体说明如下：
页面上有12个相同大小的div元素
这12个div元素具有不同的背景颜色
前6个div元素均为顺时针移动，其最小转动角度为10deg，相邻元素间的角度差为10deg
后6个div元素均为逆时针移动，其最小转动角度为10deg，相邻元素间的角度差为10deg
注意，元素6和元素7，各自反方向转动10deg，所以它们之间的角度差为20deg
四、实验结果与讨论
- 前期准备工作
- 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）
作者：巨金玲
主编：欧洋
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
