蓝桥web真题：第一届大学组1-5题

jayLog

已于 2022-04-25 10:24:08 修改

阅读量3.2k

点赞数 10

分类专栏： js 前端蓝桥web 文章标签：前端

于 2022-04-15 23:08:36 首次发布

本文链接：https://blog.youkuaiyun.com/jayLog/article/details/124205954

版权

本文介绍了使用CSS3实现的五个实际应用：弹性布局的水果拼盘、扇子展开动画、手机使用时长折线图、颜色变化的交通灯和抽奖转盘效果。通过这些实例，读者可以深入理解CSS3在前端开发中的强大功能和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

第一题：水果拼盘

第二题：张开你的扇子

第三题：和手机相处的时间

第四题：灯的颜色变化

第五题：东奥大抽奖

end

第一题：水果拼盘

题干：目前CSS3中新增的Flex弹性布局已成为前端页面布局的首选方案，本题可以使用Flex熟悉快速完成布局。

建议使用flex布局，将水果放入对应颜色的区域

请添加图片描述

送分题，只需设置允许flex换行，再将主轴设置为竖直方向即可

关键代码(css/style.css)：

/* TODO：待补充代码 */
#pond {
   
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

第二题：张开你的扇子

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

请添加图片描述

解题思路：

动画触发可以使用伪类 :hover,鼠标上移的适合触发。加在动画的父元素上
书本张开使用css3的2d转换transform:rotate(10deg),deg是旋转角度单位

关键代码：

/*TODO：请补充 CSS 代码*/
#box:hover>#item6 {
   
  transform: rotate(-10deg);
}
#box:hover #item5 {
   
  transform: rotate(-20deg);
}
#box:hover #item4 {
   
  transform: rotate(-30deg);
}
#box:hover #item3 {
   
  transform: rotate(-40deg);
}
#box:hover #item2 {
   
  transform: rotate(-50deg);
}
#box:hover #item1 {
   
  transform: rotate(-60deg);
}

#box:hover #item7 {
   
  transform: rotate(10deg);
}
#box:hover #item8 {
   
  transform: rotate(20deg);
}
#box:hover #item9 {
   
  transform: rotate(30deg