css3 3D圆周运动

最新推荐文章于 2024-08-04 18:58:23 发布

MrFano

最新推荐文章于 2024-08-04 18:58:23 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： css3 H5

本文链接：https://blog.csdn.net/MrFano/article/details/72864396

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
top: 200px;
left: 200px;
border-radius: 50%;
width: 0;
height: 0;
border-top: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
border-bottom: 30px solid yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<script>
var divs = document.getElementsByTagName('div');

circleMove({
//*为必须写
'obj':divs[0],//哪个元素*
'yuanxin':[200,200],//圆周运动圆心*
'r':200,//半径*
'looptime':2000,//一圈时间*
'degree':0,//开始角度
'dirction':1//默认为1正方向 -1方向运动反向
});
circleMove({
//*为必须写
'obj':divs[2],//哪个元素*
'yuanxin':[200,200],//圆周运动圆心*
'r':100,//半径*
'looptime':2000,//一圈时间*
'degree':0,//开始角度
'dirction':1//默认为1正方向 -1方向运动反向
});
//中间小球自传
var deg =0;
setInterval(function(){
for (var i = 0; i < divs.length; i++) {
divs[i].style.transform='rotate('+ -1*deg +'deg)';
}
deg +=7;
if (deg>=360) {
deg=0;
}
},20)
// 运动函数
function circleMove(argsJSON){
//获取旋转对象
var o =argsJSON.obj;
//圆心
var a =argsJSON.yuanxin[0];
var b =argsJSON.yuanxin[1];
//半径
var r=argsJSON.r;
//运动方向
var dirction =argsJSON.dirction||1;
//信号量，当前的角度，0度就是12点钟方向。瞬时针
var degree =argsJSON.degree||0;

//每帧运动多少时间，毫秒
var interval =20;
//运动一周时间
var looptime =argsJSON.looptime;
//计算一圈的帧数
var loopframes =looptime/interval;
//一圈360度，计算每帧的度数
var degreeDelta = 360/loopframes;
//核心定时器
setInterval(function(){
//每次旋转多少度
degree+=degreeDelta*dirction;
if (degree>=360) {
degree=0;
}
go(degree);
},interval)
//没走一次，都相当于设置盒子的left和top值
function go(degree){
o.style.left = a + r*Math.sin(degreeToRad(degree))+'px';
o.style.top= b - r*Math.cos(degreeToRad(degree))+'px';
}
角度转化为弧度
function degreeToRad(degree){
return degree*Math.PI/180 ;
}

}
</script>
</body>
</html>

MrFano

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css3 3D圆周运动

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;style&gt;div{position: absolute;top: 200px;left:
复制链接

扫一扫

专栏目录