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