<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>圆周运动的css3特效</title>
<style>
.box{
300px;
height:300px;
margin:200px auto;
position:relative;
-webkit-perspective:1500px;
}
.div{
300px;
height:300px;
position:absolute;
transform-style:preserve-3d;
animation:name 8s linear infinite;
transform:rotateX(0deg) rotateY(0deg);
}
@-webkit-keyframes name {
from{
transform:rotateX(0deg) rotateY(0deg);
}
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
.div>div{
300px;
height:300px;
border:black 1px solid;
position:absolute;
border-radius:50%;
}
.box1{
transform:rotateY(0deg);
}
.box2{
transform:rotateY(120deg);
}
.box3{
transform:rotateY(240deg);
}
.inner{
6px;
height:6px;
position:absolute;
top:300px;
left:150px;
}
</style>
</head>
<body>
<div class="box">
<div class="div">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
<script>
var box1=document.querySelector(".box1");
var box2=document.querySelector(".box2");
var box3=document.querySelector(".box3");
function create(a){
for(var i=0;i<100;i++){
var div=document.createElement("div");
div.className="inner";
a.appendChild(div)
}
}
create(box1)
create(box2)
create(box3)
function an(b){
var inner=b.querySelectorAll(".inner");
var i=0; //角度
var j=0; //元素下标
var pi=Math.PI/180;
var t=null;
t=setInterval(function(){
i++;
if(i>=360){
i=0;
}
if(j>=100){
j=0;
}
inner[j].style.background="rgb("+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+")";
inner[j].style.left=150+Math.floor(150*Math.sin(i*pi))-3+"px";
inner[j].style.top=150-Math.floor(150*Math.cos(i*pi))-3+"px";
j++;
},10)
}
an(box1);
an(box2);
an(box3);
</script>