use canvas Draw the effect of a balloon )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/> <style type="text/css"> * { margin: 0px; padding: 0px; } </style> </head>
<body> <canvas id="box" width="" height=""></canvas> <!--<button
id="btn"> suspend </button>--> <script type="text/javascript"> var box =
document.querySelector("#box"); var ctx = box.getContext("2d"); var clientWidth
= (document.documentElement || document.body).clientWidth; // Get visual area width var
clientHeight = (document.documentElement || document.body).clientHeight;
// Get height of visual area box.width = this.clientWidth; box.height = this.clientHeight; var
canvasBox = function() { this.limit = 80; // Limit balloons this.sizes = [15, 20, 25,
30]; // Some sizes of balloons this.width = clientWidth; this.height = clientHeight;
this.balloonList = []; // Balloon collection this.colors = ["orange", "deeppink",
"deepskyblue", "yellow", "red"]; this.speedList = [1, -2, 3, -4, 5]; //
document.getElementById("btn").addEventListener("click", function() { //
this.stop(); // }.bind(this)) this.init = function() { // Initialize build balloon var that =
this; for(var i = 0,len=this.limit; i <len; i++) { var sizeIndex =
Math.floor(Math.random() * 4); var size = this.sizes[sizeIndex]; var colorIndex
= Math.floor(Math.random() * 5); var color = this.colors[colorIndex]; var x =
Math.floor(Math.random() * this.width); var y = Math.floor(Math.random() *
this.height); var globalAlpha = (Math.random() * (0.8 - 0.1) + 0.1) x = x +
size >= this.width ? (this.width - size - 1) : (x - size <= 0 ? size + 1 : x);
y = y + size >= this.height ? (this.height - size - 1) : (y - size <= 0 ? size
+ 1 : y); var balloon = function() { // Single balloon this.x = x; this.y = y; this.size =
size; this.color = color; this.speedX = that.speedList[Math.floor(Math.random()
* 5)]; this.speedY = that.speedList[Math.floor(Math.random() * 5)];
this.globalAlpha = globalAlpha; this.globalSpeed = 0.01; }
this.balloonList.push(new balloon()); ctx.fillStyle = color; ctx.globalAlpha =
globalAlpha; ctx.shadowColor = "black"; ctx.beginPath(); ctx.arc(x, y, size, 0,
2 * Math.PI); ctx.fill(); } this.move(); } this.move = function() { // Balloon begins to move randomly
this.time = window.requestAnimationFrame(this.move.bind(this));
ctx.clearRect(0, 0, this.width, this.height); for(var i = 0,len=this.limit; i <
len; i++) { var balloon = this.balloonList[i]; if(balloon.x + balloon.size >=
this.width || balloon.x - balloon.size <= 0) { balloon.speedX =
-balloon.speedX; } if(balloon.y + balloon.size >= this.height || balloon.y -
balloon.size <= 0) { balloon.speedY = -balloon.speedY; } if(balloon.globalAlpha
>= 0.8 || balloon.globalAlpha <= 0.1) { balloon.globalSpeed =
-balloon.globalSpeed; } var x = balloon.x + balloon.speedX; var y = balloon.y +
balloon.speedY; balloon.x = x; balloon.y = y; balloon.globalAlpha =
balloon.globalAlpha + balloon.globalSpeed; ctx.fillStyle = balloon.color;
ctx.beginPath(); ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsety
= 0; ctx.globalAlpha = balloon.globalAlpha; ctx.shadowColor =
"rgba(0,0,0,0.2)"; ctx.arc(x, y, balloon.size, 0, 2 * Math.PI); ctx.fill(); } }
this.stop = function() { // suspend if(this.time) {
window.cancelAnimationFrame(this.time); this.time = null } else { this.move();
} } }; new canvasBox().init(); </script> </body> </html>
The code is not very good , Just have a look

Technology
©2019-2020 Toolsou All rights reserved,
MySql sentence Recursively find all subordinate departments of an input department ( Essence )2020 year 7 month 30 day Wechat applet Use of modules ( Essence )2020 year 6 month 26 day C# Class library model PageInputunity Get the car speed and forward or backward python3 Read the file and specify a few lines , And write to another file Vue el-select obtain label value @Repository The role of annotations Fiddler Simulate request sending and modifying response data python Short circuit logic in Paging tool class PageResult