.taiji { margin:50px auto 0; height:200px; width:200px; animation:run-inner 2s infinite linear; } @keyframes run-inner { 0% { transform:rotate(0deg) } 25% { transform:rotate(-90deg) } 50% { transform:rotate(-180deg) } 75% { transform:rotate(-270deg) } 100% { transform:rotate(-360deg) } }.a { width:200px; height:100px; border:1px solid #D3D3D3; border-bottom:0px; border-radius:100px 100px 0 0; background:#fff; position:relative; } .a:after { content:""; background:#fff; width:15px; height:15px; border-radius:50%; position:absolute; top:72px; left:147px; } .a .inner { width:100px; height:50px; position:absolute; bottom:0; right:0; background:#000; border-radius:50px 50px 0 0; } .b { width:201px; height:101px; border:1px solid #D3D3D3; border-top:0px; border-radius:0 0 100px 100px; background:#000; position:relative; } .b:after { content:""; background:#000; width:15px; height:15px; border-radius:50%; position:absolute; bottom:72px; right:147px; } .b .inner { width:100px; height:50px; position:absolute; top:0; left:0; background:#fff; border-radius:0 0 50px 50px; }
适合初学者