css怎么做太极图 |于亚东 css

.taiji{
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000;
background-color: #000;
box-shadow: 2px 0 10px rgba(0,0,0,0.5) inset;
}
.taiji::before{
content: "";
display: block;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
.taiji::after{
content: "";
display: block;
position: absolute;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
border-radius: 50%;
background-color: #000;
}
.taiji:hover::before{
background: #000;
}
.taiji:hover::after{
background: #fff;
}

首先，大家创建一个class为taiji的div。为了让它成为一个圆形，大家设定它的宽高为200px，并把它的边框半径设为50%。接着，大家为它设置一个黑色背景，一个白色圆和一个黑色圆。大家使用::before选择器来创建白色圆，使用::after选择器来创建黑色圆。通过position:absolute和left:50%属性，大家把它们放到了圆心位置。然后，大家为白色圆设置了z-index：1，使其浮在黑色圆的上面。

最后，通过:hover选择器，大家为太极图添加了鼠标悬停效果，使白色圆和黑色圆在鼠标悬停时互相交替改变颜色。