知识点：边框 + 旋转 + 过渡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background-color: #666; } .box { margin: 50px auto; /* box只设置了宽度，高度为0，实际占有的高度，靠边框撑起来的 */ width: 600px; border-top: 300px solid black; border-bottom: 300px solid white; border-radius: 50%; position: relative; /* 旋转90deg */ transform: rotate(45deg); /* 过渡效果 */ transition: all 1s; } .box:hover { /* 旋转角度 */ transform: rotate(405deg); } .box:before { content: ''; display: block; width: 100px; height: 100px; border: 100px solid white; background-color: black; position: absolute; top: -150px; left: 0; border-radius: 50%; } .box:after { content: ''; display: block; width: 100px; height: 100px; border: 100px solid black; background-color: white; position: absolute; top: -150px; right: 0; border-radius: 50%; } .box1 { width: 100px; height: 100px; background-color: orange; margin: 0 auto; border-radius: 50%; border: 100px solid blue; } </style> </head> <body> <div class="box"> </div> <div class="box1"></div> </body> </html>原理讲解：
创建一个盒子，宽600，高为0使用上下边框撑起盒子的高度为600，上下边框宽度分别为300使用border-radius设置50%，实现圆角设置盒子为relative定位，让父元素为相对定位设置：after和：before生成两个伪类元素让两个伪类元素宽度和高度为100，设置四个边框为100和对应颜色使用圆角设置50%，将其转为同心圆设置对应的定位方式将其放到指定位置设置旋转和过渡，完成太极的旋转效果喜欢的同学可以关注我们的B站，里面有详细的视频讲解。讲师诙谐幽默，各种姿势讲解只为让你学会 视频链接
