css旋转的太极图 |css3鼠标移入动画

.taiji {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
overflow: hidden;
background-color: white;
}
.taiji:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: black;
border-radius: 50%;
}
.taiji:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: white;
border-radius: 50%;
}
.taiji:hover:before {
transform: rotate(180deg);
}
.taiji:hover:after {
transform: rotate(-180deg);
}

以上代码实现了一个简单的太极图，主要是使用了border-radius属性，让元素变成了圆形，也用到了position属性，使得伪元素(before和after)能够在被定位的.parent元素内绝对定位。

当鼠标移动到太极图上时，使用:hover伪类和CSS3的transform属性，实现了太极图的旋转效果。