这道题不是太会，请老师讲解一下

同学你好，主要还是布局问题，可以参考下面简化图

1、一个正方形里面有两个小正方形，中心点都在同一个水平线上行。

2、大正方形的上下部分颜色不一致，那么就需要先设置长方形，下半部分长方形可以使用border-bottom底边框完成，这样上半部分内容颜色以及下半部分边框颜色就是不一致的。然后需要使用border-radius属性将正方形变为圆形

3、中间两个小正方形是中间内容颜色和四周颜色不一致，那么就需要先设置一个小边框的正方形，然后再使用border属性将小正方形变大，这样内外颜色就是不一致的，然后使用border-radius属性变为圆形

4、再使用定位定到相同的水平线上，再添加旋转的动画效果

自己试着写一写，如果还是疑惑，可以看看问答区其他同学的代码

或者将自己写的代码粘贴上来，老师帮助测试。

祝学习愉快！