思路:
1)一圆半径为两个小圆的直径,画出来黑白两个二层圈
2)再以话出来的两个二层圈直径一半画两个三圈
3)给二层以及三层上色
<!doctype html> <html> <head> #by : linhut<br> #time:2017/5/16 <meta charset="utf-8"> <title>太极图</title> <style> .ouside{ width:200px; height:200px; border-radius:50%; border:1px solid #FFF; background-color:#000; position:relative; } .left{ position:absolute; height:200px; width:100px; left:0px; top:0px; border-radius:100% 0 0 100% / 50% 0 0 50%; background:#000; } .right{ position:absolute; height:200px; width:100px; left:100px; top:0px; border-radius:0 100% 100% 0 / 0 50% 50% 0; background:#FFF; } .up{ position:absolute; width:50%; height:50%; top:0px; left:25%; border-radius:50px; background:#000; } .up_mini{ position:absolute; width:25%; height:25%; left:37.5%; top:37.5%; background:#FFF; border-radius:50%; } .down{ position:absolute; bottom:0px; left:25%; width:50%; height:50%; border-radius:50px; background:#FFF; } .down_mini{ position:absolute; width:25%; height:25%; left:37.5%; bottom:37.5%; background:#000; border-radius:50% } #turn{ animation-name:donghua; animation-duration:1s; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes donghua{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } </style> </head> <body style="background-color:#c4c4c4"> <div class="ouside" id="turn"> <!-- 建一级圆底色为黑--> <div class="left"></div> <!-- 分一半为黑--> <div class="right"></div> <!-- 分一半为白--> <div class="up"> <!-- 二级黑圈--> <div class="up_mini"></div> <!-- 三级白圈--> </div> <div class="down"> <!-- 二级白圈--> <div class="down_mini"></div> <!-- 三级黑圈--> </div> </div> </body> </html>
最新评论