CSS太極圖動畫是一種炫酷的動畫效果，可以通過CSS的旋轉(zhuǎn)、縮放和過渡等屬性來實現(xiàn)。

/* 太極圖樣式 */
.taiji {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
/* 太極圖黑色部分 */
.taiji:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: black;
}
/* 太極圖白色部分 */
.taiji:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
border-radius: 50%;
background: white;
}
/* 太極圖黑白陰陽陰陽調(diào)和效果 */
.taiji.active:before {
transform: rotate(180deg);
}
.taiji.active:after {
transform: rotate(180deg);
}
.taiji.active {
animation: taiji 4s ease-in-out infinite;
}
/* 太極圖動畫 */
@keyframes taiji {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(720deg);
}
}

以上是CSS太極圖動畫的樣式代碼，其中通過:before偽元素和:after偽元素分別實現(xiàn)了黑白陰陽的效果，通過.active類來實現(xiàn)陰陽調(diào)和效果，最后在樣式里定義了一個taiji動畫，實現(xiàn)太極圖的旋轉(zhuǎn)效果。

通過在HTML里添加一個taiji類的div元素，并在JavaScript里監(jiān)聽其點擊事件，可以通過添加和移除.active類來實現(xiàn)太極圖的動態(tài)效果。

// JS監(jiān)聽點擊事件
var taiji = document.querySelector(".taiji");
taiji.addEventListener("click", function() {
taiji.classList.toggle("active");
});

通過以上的CSS樣式和JavaScript代碼，實現(xiàn)了一個炫酷的太極圖動畫效果。