<!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,
Golang Array bisection , Array split , Array grouping C Language confession practice small program ( Suitable for beginners )vs2017, establish C++Win32 Windows Forms Application Hackbar Using the tutorial 11-5 Output string at specified position Mybatis Mapping file Mapper.xml in # and $ The difference between Keras Summary of training data loading springboot Multi profile configuration ( Essence 2020 year 6 month 2 Daily update ) TypeScript Function explanation Maximum security risk of cloud computing : Unclear safety responsibility