CSS太極動畫是一種基于CSS技術的動態效果，可以讓頁面更加生動、有趣。下面我們來介紹一下如何創建太極動畫。

/* 定義樣式 */
.taiji {
width: 200px;
height: 200px;
background-color: #000;
border-radius: 50%;
position: relative;
margin: 50px auto;
}
.yin {
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.yang {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* 定義動畫 */
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
/* 使用動畫 */
.taiji:hover .yin {
animation: rotate 2s linear infinite;
}
.taiji:hover .yang {
animation: rotateReverse 2s linear infinite;
}
@keyframes rotateReverse {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}

以上代碼中，我們定義了一個容器.taiji，其中包含兩個小球.yin和.yang，分別表示陰和陽。通過CSS樣式，讓兩個小球分別位于大球的上下兩個端點。

接下來，我們定義了一個名為rotate的動畫，它使小球.yin按照順時針方向旋轉。當鼠標懸停在大球上方時，啟用該動畫。

同時，我們還定義了一個名為rotateReverse的動畫，使小球.yang按照逆時針方向旋轉。同樣，在鼠標懸停在大球上方時啟用該動畫。

通過以上代碼，我們就實現了一個簡單的CSS太極動畫效果。希望大家能夠嘗試使用該技術，為頁面添加一些動態效果。