怎么用CSS畫太極圖

太極圖是中國(guó)傳統(tǒng)文化中的經(jīng)典圖案，也是中國(guó)古代哲學(xué)的重要符號(hào)，在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，我們可以使用CSS來(lái)繪制太極圖，下面是一種簡(jiǎn)單的方法：

1、創(chuàng)建一個(gè)HTML文件，并在其中添加兩個(gè)div元素，分別代表太極圖的陰陽(yáng)兩部分。

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

2、使用CSS來(lái)設(shè)置這兩個(gè)div元素的樣式，我們可以使用border-radius屬性來(lái)繪制圓形，使用背景顏色來(lái)填充陰陽(yáng)兩部分。

#taiji {
  position: relative;
  width: 200px;
  height: 200px;
}
#yin {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
}
#yang {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
}

3、在HTML文件中添加一些JavaScript代碼來(lái)動(dòng)態(tài)調(diào)整陰陽(yáng)兩部分的位置，以模擬太極圖的旋轉(zhuǎn)效果。

function rotate() {
  var taiji = document.getElementById('taiji');
  var yin = document.getElementById('yin');
  var yang = document.getElementById('yang');
  var angle = 0;
  requestAnimationFrame(function() {
    angle += 1;
    if (angle >= 360) { angle = 0; }
    var transform = 'rotate(' + angle + 'deg)';
    yin.style.transform = transform;
    yang.style.transform = transform;
    rotate();
  });
}
rotate();

代碼將創(chuàng)建一個(gè)簡(jiǎn)單的太極圖，并使其以旋轉(zhuǎn)的方式呈現(xiàn)，這只是一個(gè)簡(jiǎn)單的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和擴(kuò)展。