太極旋轉 JS實現

2022-03-07 22:26:23 字數 696 閱讀 4082

剛學了js的一些函式,所以做了乙個太極的旋轉。做完之後是上面這個樣子的,是可以旋轉的。

思路:1.先做乙個基準轉盤,之後將元素都放在轉盤上,跟隨轉盤動。

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

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

4.設定定時器:

//

旋轉角度

var deg = 0

//設定定時器,100毫秒動一次

var tid = setinterval(function

(),100);

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

**分享:

Canvas繪製旋轉太極

之前在一片博文裡面看到博主畫了乙個太極 不過裡面的太極旋轉是靠每0.5秒重新繪畫一次而實現了。正好最近要學html5和css3,我就給它加了乙個css3的旋轉方法,放在上面。旋轉更流暢了 html var canvas document.getelementbyid face var cxt can...

css3 HTML實現太極旋轉動畫

1.實現了太極圖在手機端與pc端的旋轉動畫 八卦圖title head type text css body keyframes xto 八卦 八卦 div first child media max width 500px 八卦 div nth child 2 八卦 div nth child 3...

原生js實現旋轉輪播

以上是html部分 function animate obj,json,fn else 去掉px 的方法 parseint 25px 25 alert leader var step json k leader 10 step step 0 math.ceil step math.floor ste...