body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,input,select,option,textarea{ margin:0; padding:0; } html,body{ height: 100%; } body{ display: flex; justify-content: center; align-items: center; background: gray; } .boss{ display: flex; animation: zhuan 5s infinite linear; } @keyframes zhuan{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } .box{ width: 400px; height: 400px; display: flex; border-radius: 50%; overflow: hidden; } .box .h{ width: 200px; height: 400px; background:#000; } .box .b{ width: 200px; height: 400px; background:#fff; } .yuan{ position: fixed; transform: translate(100px); } .xy{ width: 200px; height: 200px; border-radius: 50%; margin:0 auto; display: flex; justify-content: center; align-items: center; } .xy1{ background: #000; } .xy1 .bd{ width: 70px; height: 70px; background: #fff; border-radius: 50%; } .xy2{ background: #fff; } .xy2 .hd{ width: 70px; height: 70px; background: #000; border-radius: 50%; }
动态八卦图 纯css制作