太极图可以理解为一个一半黑一半白的半圆,上面放置着两个圆形,一个黑色边框白色芯,一个白色边框黑色芯。
1、实现黑白各半的圆形。
.box{ width:200px;height:200px; border-radius:50%; background:linear-gradient(90deg,black 50%,white 50%); margin:50px auto;position:relative; }
2、用:before伪类实现一个黑色边框白色芯的园。
.box:before{ content:" "; position:absolute; width:0px;height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px; }
3、用:after伪类实现一个白色边框黑色芯的圆。
.box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px; }
旋转太极图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>太极图</title> <style> *{ margin:0;padding:0; } body{ background: #eee } .box{ width:200px;height:200px; border-radius:50%; background: linear-gradient(90deg,black 50%,white 50%); margin:50px auto; position:relative; animation: tj 3s infinite linear ;} .box:before{ content:" "; position:absolute; width:0px; height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px; } .box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px; } @keyframes tj{ from {transform:rotate(0deg);} to{transform:rotate(360deg);} } </style> </head> <body> <div class="box"></div> </body> </html>