CSS3繪制旋轉(zhuǎn)太極圖

太極圖是中國傳統(tǒng)文化中的經(jīng)典元素，它代表了天地萬物的發(fā)展規(guī)律，在現(xiàn)代網(wǎng)頁設(shè)計中，我們也可以用CSS3來繪制旋轉(zhuǎn)的太極圖。

我們需要創(chuàng)建一個HTML文件，并在其中添加兩個div元素，分別代表太極圖中的陰陽兩部分。

<div class="taiji">
  <div class="yin"></div>
  <div class="yang"></div>
</div>

我們需要使用CSS3來定義這些元素的外觀和動畫效果。

.taiji {
  position: relative;
  width: 200px;
  height: 200px;
}
.yin, .yang {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.yin {
  background-color: #000;
}
.yang {
  background-color: #fff;
  transform: rotate(180deg);
}

在這個CSS代碼中，我們首先將太極圖的容器設(shè)置為相對定位，并指定了寬度和高度，我們將陰陽兩部分分別設(shè)置為***定位，并指定了它們的寬度、高度和位置，為了繪制完整的太極圖，我們需要將陽的部分旋轉(zhuǎn)180度，以使其與陰的部分相對位置正確。

我們可以使用JavaScript來添加旋轉(zhuǎn)動畫效果。

function rotateTaiji() {
  var taiji = document.querySelector('.taiji');
  var angle = 0;
  var step = 5; // 每次旋轉(zhuǎn)的角度
  var timer = setInterval(function() {
    angle += step;
    if (angle >= 360) { // 如果旋轉(zhuǎn)角度超過360度，則重置為0度
      angle = 0;
    }
    taiji.style.transform = 'rotate(' + angle + 'deg)'; // 更新太極圖的旋轉(zhuǎn)角度
  }, 20); // 每20毫秒更新一次旋轉(zhuǎn)角度
}

在這個JavaScript代碼中，我們定義了一個rotateTaiji函數(shù)，用于添加旋轉(zhuǎn)動畫效果到太極圖上，我們使用了一個定時器來不斷更新太極圖的旋轉(zhuǎn)角度，從而實現(xiàn)旋轉(zhuǎn)動畫效果，我們可以將這個函數(shù)綁定到某個事件上，例如點擊事件或頁面加載事件等。