<!DOCTYPE html><html><head><meta charset="UTF-8"><title>太极旋转图</title><style type="text/css">body{margin: 0px;padding: 0px;}.wrap{width: 200px;height: 100px;margin: 50px auto;/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/border-width: 1px 1px 100px 1px;border-style: solid;border-radius: 50%;position: relative;}.left{position: absolute;top: 50%;width: 20px;height: 20px;background-color: #fff;border: 40px solid #000;border-radius: 50%;}.right{/*当设置绝对定位时，如果没有参考物（相对定位），* 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*//*相对定位其实就是相对参考物:父相子绝*/position: absolute;top: 50%;/*left: 100px;*/right: 0px;width: 20px;height: 20px;background-color: #000;border: 40px solid #fff;border-radius: 50%;}</style></head><body><div class="wrap"><div class="left"></div><div class="right"></div></div></body></html>
第二种方式：
用一个div实现（伪元素），性能更好
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>太极旋转图</title><style type="text/css">body{margin: 0px;padding: 0px;}.wrap{width: 200px;height: 100px;margin: 50px auto;/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/border-width: 1px 1px 100px 1px;border-style: solid;border-radius: 50%;position: relative;}.wrap:before{content: '';/*激活伪元素的必要因素*/position: absolute;top: 50%;width: 20px;height: 20px;background-color: #fff;border: 40px solid #000;border-radius: 50%;}.wrap:after{content: '';/*激活伪元素的必要因素*//*当设置绝对定位时，如果没有参考物（相对定位），* 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*//*相对定位其实就是相对参考物:父相子绝*/position: absolute;top: 50%;/*left: 100px;*/right: 0px;width: 20px;height: 20px;background-color: #000;border: 40px solid #fff;border-radius: 50%;}</style></head><body><div class="wrap"></div></body></html>
第二个方法中，再简洁一点：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>太极旋转图</title><style type="text/css">body{margin: 0px;padding: 0px;}.wrap{width: 200px;height: 100px;margin: 50px auto;/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/border-width: 1px 1px 100px 1px;border-style: solid;border-radius: 50%;position: relative;}.wrap:before,.wrap:after{content: '';/*激活伪元素的必要因素*/position: absolute;top: 50%;width: 20px;height: 20px;border-radius: 50%;}.wrap:before{background-color: #fff;border: 40px solid #000;}.wrap:after{/*当设置绝对定位时，如果没有参考物（相对定位），* 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*//*相对定位其实就是相对参考物:父相子绝*/right: 0px;background-color: #000;border: 40px solid #fff;}</style></head><body><div class="wrap"></div></body></html>
接下来就需要这个太极旋转起来，这时就需要CSS中的动画属性
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>太极旋转图</title><style type="text/css">body{margin: 0px;padding: 0px;}.wrap{width: 200px;height: 100px;margin: 50px auto;/*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/border-width: 1px 1px 100px 1px;border-style: solid;border-radius: 50%;position: relative;/*通过属性去调用之前定义好的动画*/animation: rote 1s linear infinite;/*rote 就是这个动画的名称*//*2s 表示做一次这个动画需要2s时间 决定旋转的快慢*//*linear 表示匀速的旋转*//*infinite 表示永久旋转*/}.wrap:before,.wrap:after{content: '';/*激活伪元素的必要因素*/position: absolute;top: 50%;width: 20px;height: 20px;border-radius: 50%;}.wrap:before{background-color: #fff;border: 40px solid #000;}.wrap:after{/*当设置绝对定位时，如果没有参考物（相对定位），* 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*//*相对定位其实就是相对参考物:父相子绝*/right: 0px;background-color: #000;border: 40px solid #fff;}/*定义CSS动画*/@keyframes rote{from{transform: rotate(0deg);/*旋转*/}to{transform: rotate(360deg);/*旋转*/}}</style></head><body><div class="wrap"></div></body></html>
