剛學了js的一些函數，所以做了一個太極的旋轉。做完之后是上面這個樣子的，是可以旋轉的。

思路：

1.先做一個基準轉盤，之后將元素都放在轉盤上，跟隨轉盤動。

2.畫兩個半圓，主要屬性是border-top-right-radius: 250px; 像素值為長邊的一半。

3.然后畫4個圓，以基準轉盤為父元素，按照下面黑色圓一樣的思路再畫另外一邊白色的圓，最后再在兩個中等的圓上畫兩個小圓。

4.設置定時器：

//旋轉角度var deg = 0//設置定時器，100毫秒動一次var tid = setInterval(function(){ var clock_dfc = document.getElementById("clock-dfc"); clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改變轉盤屬性 deg -=30;//每次賺30度},100);

5.小結：就是簡單的CSS疊加出來的效果。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！