<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极图</title> <style> body{ background: #7c7c7c; } .taiji{ width: 300px; height: 300px; border-radius: 300px; margin: 50px auto; overflow: hidden; display: flex; animation: taiji 5s infinite linear; } @keyframes taiji{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .taijileft{ height: 300px; width: 150px; background: white; } .taijirigth{ height: 300px; width: 150px; background: black; } .taijil{ width: 150px; height: 150px; border-radius: 150px; position: relative; left: 80px; margin:0px auto; z-index: 3; background: white; } .taijir{ width: 148px; height: 148px; border: 1px solid #000; border-radius: 150px; position: relative; top: 150px; right: 75px; background: black; margin:0px auto; } .taijil div{ width: 30px; height: 30px; border-radius: 30px; background: black; position: relative; top: 37%; left: 39%; } .taijir div{ width: 30px; height: 30px; border-radius: 30px; background: white; position: relative; left: 39%; top: 38%; } </style></head><body> <div class="taiji"> <div class="taijileft"> <div class="taijil"> <div></div> </div> </div> <div class="taijirigth"> <div class="taijir"> <div></div> </div> </div> </div></body></html>
