蓝桥杯（Web大学组）2022省赛真题：展开你的扇子

本文主要是介绍蓝桥杯（Web大学组）2022省赛真题：展开你的扇子，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路：

  transform-origin: center bottom;使盒子旋转时，以底部的中心为坐标原点（题目已给出）

对每个盒子使用transform: rotate();实现旋转

笔记：

设置悬浮旋转时， #box div:hover #item6{ }        为什么加了div就不起作用？

这个 CSS 选择器的写法是有问题的， #item6 是#box div的后代且 #box 的子孙时才有效

代码：

#box {width: 300px;height: 440px;margin: 100px auto;position: relative;
}#item1,
#item12 {background-color: #90e0ef;
}
#item2,
#item8 {background-color: #8bdb81;
}
#item3,
#item10 {background-color: yellowgreen;
}
#item4,
#item6 {background-color: skyblue;
}
#item5,
#item9 {background-color: #d9d7f1;
}
#item7,
#item11 {background-color: #fed1f1;
}
#box div {width: 100%;height: 400px;transition: all 1.5s;position: absolute;left: 0;top: 0;/*旋转时，以盒子底部的中心为坐标原点*/transform-origin: center bottom;box-shadow: 0 0 3px 0 #666;
}
/*TODO：请补充 CSS 代码*//* 为什么加了div就不起作用？ */
/* #box div:hover #item6{ */#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);
}
#box:hover #item10{transform: rotate(40deg);
}
#box:hover #item11{transform: rotate(50deg);
}
#box:hover #item12{transform: rotate(60deg);
}

这篇关于蓝桥杯（Web大学组）2022省赛真题：展开你的扇子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---