蓝桥杯前端Web赛道-展开你的扇子&&和手机相处的时光

蓝桥杯前端Web赛道-展开你的扇子&&和手机相处的时光

这两道题都很简单所以写在一起，先看展开你的扇子

题目链接：1.展开你的扇子 - 蓝桥云课 (lanqiao.cn)

题目要求如下：

其实就是在鼠标放上去的时候，每个div都需要更改角度，按照要求使用下面的代码即可

transform: rotate(填入角度deg);

在做题的时候我使用的，虽然能完成要求但是不给我过，所以还是使用上面的代码比较好

 rotate:填入角度deg

特别需要注意的是题目要求是鼠标放上去的时候变化，所以需要加上hover 我直接放完整代码在下面

#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);
}

顺带一提不要搞错hover写在谁身上，观察dom结构我们可以发现id="box"的这个盒子包含了所有元素，为了让它们都展开，所以必须hover写在它身上。

现在我们来看和手机相处的时光

题目链接：1.和手机相处的时光 - 蓝桥云课 (lanqiao.cn)

题目要求：

其实我们和题目比较观察可以发现两点

• 折线图的x,y轴与要求的相反
• 折线图的x轴的内容不一样

所以我们只需要交换x,y轴的type即可达到目的

 xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
      },