这个伪元素的位置对齐还妹搞明白 需要再研究研究
<html> <head> <title>taiji</title> <style> body{ background-color: antiquewhite; } .box-taiji{ z-index: 0; width: 0; height: 300px; position: relative; margin: 50px auto; border-left: 150px solid #000; border-right: 150px solid #fff; border-radius: 150px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; -o-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; } @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)} to{-webkit-transform: rotate(360deg)} } @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)} to{-moz-transform: rotate(359deg)} } @-o-keyframes rotate{from{-o-transform: rotate(0deg)} to{-o-transform: rotate(359deg)} } @keyframes rotate{from{transform: rotate(0deg)} to{transform: rotate(359deg)} } .box-taiji::after{ z-index: 1; width: 150px; height: 150px; position: absolute; top: 0; left: -80px; content: ‘‘; display: block; background:#000; border-radius: 75px; box-shadow: 0 150px 0 #fff; } .box-taiji::before{ content:‘‘; position: absolute; display: block; width:50px; height:50px; left: -30px; top: 45px; z-index:2; background-color:#fff; border-radius:50%; box-shadow:0 150px 0 #000; } </style> </head> <body> <div class="box-taiji"> </div> </body> </html>
原文：https://www.cnblogs.com/qq965921539/p/11428214.html