Effect preview:
This is an effect I saw on the Internet. I think it is still very good. I studied the source code and shared it with you today. It is actually very simple.
Briefly describe the principle:
The first is to use CSS to draw a number of circles in the div created by the dom. The size of the circle is a random number, the number of circles is also randomly set, and of course the color is also random.
The last step is the movement speed, and then get the width and height of the screen. The next step is to make the ball move. When the boundary value is reached, it changes the direction and executes the function of the movement of fn in a loop.
Source code:
.ball { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: radial-gradient(circle, #fff, #fff600); border-radius: 50%; }
// create [1,11) balls var mdAttr = document.createDocumentFragment(); var OBall = [];//Array of small ball objects for (var i = 0; i < random(5,20); i++) { OBall[i] = document.createElement("div"); OBall[i].setAttribute("class", "ball"); var cirR = random(80,100);//The radius of the ball OBall[i].style.width = cirR * 2 + "px"; OBall[i].style.height = cirR * 2 + "px"; OBall[i].style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; mdAttr.appendChild(OBall[i]); OBall[i].startX = random(1,10);//The initial position X can set the position by itself, not necessarily from the upper left corner OBall[i].startY = random(1,10);//Initial position Y OBall[i].Vx = random(3,10);//The speed of the horizontal increase distance is randomly increased, otherwise there is no random effect OBall[i].Vy = random(3,10);//Increase the distance vertically } document.body.appendChild(mdAttr); //Get the width and height of the browser window var W,H; window.onresize = (function(){ W = window.innerWidth, H = window.innerHeight; })(); //Motion~ ! void + a= (function fn()) ~ function fn() { OBall.forEach(function (ball) { var MaxH = H - ball.offsetHeight,//Get the maximum value of the ball position, so as not to exceed the boundary MaxW = W - ball.offsetWidth; ball.startX += ball.Vx;//Change the position of the ball ball.startY + = ball.Vy; if(ball.startX >= MaxW || ball.startX <=0){//If the ball position exceeds the maximum and minimum values, change the direction ball.Vx *= -1; ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; ball.startX = Math.max(0,ball.startX); ball.startX = Math.min(ball.startX,MaxW); } if(ball.startY >= MaxH || ball.startY <=0){ ball.Vy *= -1; ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; ball.startY = Math.max(0,ball.startY); ball.startY = Math.min(ball.startY,MaxW); } ball.style.left = ball.startX + "px";//Set the current position of the ball ball.style.top = ball.startY + "px"; }); requestAnimationFrame(fn);//loop }(); //Random Color function randomColor() { var r = Math.floor(Math.random() * 256), g = Math.floor(Math.random() * 256), b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; } // Take a random value between [min, max) function random(min,max){ return Math.random(max-min)+min; }
The comments of the source code are still very clearly written, and it is still clear to see.