<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> </title> <style
type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; overflow
: hidden; } .box { position: absolute; left:0; top:0; width: 20px; height: 20px;
background: darkcyan; border-radius: 50%; } .lineX { position: absolute; left:0;
right: 0; top: 434px; height: 1px; background: black; } .lineY { position:
absolute; top:0; bottom: 0; left: 800px; width: 1px; background: black; } </
style> <script> window.onload=function(){ var
boxs=document.getElementsByClassName("box"); var rad1=200;//y Radius of direction var rad2=500;
//x Radius of direction for(var i=0;i<boxs.length;i++){ boxs[i].degree=i*90;// Set initial target value
// Closure function send i Become a local variable (function(i){ setInterval(function(){ var x=Math
.cos(boxs[i].degree*(Math.PI/180)); var y=Math.sin(boxs[i].degree*(Math.PI/180
)); boxs[i].style.left=rad2*x+740+"px"; boxs[i].style.top=rad1*y+375+"px";
boxs[i].style.width=boxs[i].style.height=(rad1*y+424)*0.3+"px"; boxs[i].degree+=
3; },30) })(i); } } </script> </head> <body> <div class="box"></div> <div class=
"box" style="background:red"></div> <div class="box" style="background:black"></
div> <div class="box" style="background:yellow"></div> <div class="lineX"> </div
> <div class="lineY"> </div> </body> </html>

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )