html5 css3做圆周运动,圆周运动的css3特效案例

.box{

width:300px;

height:300px;

margin:200px auto;

position:relative;

-webkit-perspective:1500px;

}

.div{

width: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{

width: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{

width:6px;

height:6px;

position:absolute;

top:300px;

left:150px;

}

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);

原文：https://www.cnblogs.com/shangjun6/p/10819742.html