一、引言
在第十三届蓝桥杯大赛第一次出现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属性的重点应用，注意角度的偏转以及顺时针或是逆时针的方向问题。还有就是读清题意，能最快找到需求，完成功能实现。