html5 css3做圆周运动,圆周运动的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);

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄

×

选择打赏方式：

微信

QQ钱包

支付宝

打赏

打赏

打赏

多少都是心意！谢谢大家！！！

×

选择分享方式：

微信扫一扫，分享朋友圈

Or

手机扫一扫，精彩随身带