JS实现太极旋转思路分析

前端之家收集整理的这篇文章主要介绍了JS实现太极旋转思路分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: center">

刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。

思路:

1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。

2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。

3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。

4.设置定时器:

属性 deg -=30;//每次赚30度 },100);

5.小结:就是简单的CSS叠加出来的效果

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的JavaScript相关文章