- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>Ball</title>
- <style>
- html,body {
- width: 100vw;
- height: 100vh;
- background: black;
- overflow: hidden;
- }
- .firework {
- position: absolute;
- border-radius: 100%;
- }
- .fireball {
- position:absolute ;
- border-radius: 100%;
- }
- </style>
- </head>
- <body>
- <script>
- window.onload = function() {
- var width = window.innerWidth;
- var height = window.innerHeight;
- var bigFireworks = [];
- var fireworkStyles = [1.01, 1.02, 1.03, 6, 9];
- function randomRGB() {
- return "rgb(255," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + ")";
- }
- function randomNUM(min, max) {
- return Math.floor(Math.random() * (max - min) + min);
- }
- function makeFirework() {
- for (var i = 0; i <5; i++) {
- var fireworks = bigFireworks[i] = [];
- var firework = document.createElement("div");
- firework.className = "firework";
- firework.style.width = "8px";
- firework.style.height = "8px";
- firework.style.left = randomNUM(width / 4, width / 4 * 3) + "px";
- firework.style.top = height + "px";
- firework.style.background = randomRGB();
- firework.s = fireworkStyles[randomNUM(0, fireworkStyles.length)];
- firework.vx = 4 * (Math.random() - 0.5);
- firework.vy = 6 * (Math.random() - 1.5);
- document.body.appendChild(firework);
- fireworks[0] = firework;
- fireworks[1] = [];
- fireworks[1].count1 = 0;
- fireworks[1].count2 = 0;
- fireworks[1].limit = 5;
- fireworks[1].isReset = false;
- fireworks.isFirst = true;
- fireworks.isMove = true;
- fireworks.isBloom = false;
- }
- }
- function moveFirework(fireworks) {
- var firework = fireworks[0];
- firework.style.display = "block";
- firework.style.left = parseInt(firework.style.left) + firework.vx + "px";
- firework.style.top = parseInt(firework.style.top) + firework.vy + "px";
- if (parseInt(firework.style.left) < width / 5 ||
- parseInt(firework.style.left)> width / 5 * 4 ||
- parseInt(firework.style.top) <height / randomNUM(2, 12)) {
- firework.bloomX = parseInt(firework.style.left) + parseInt(firework.style.width) / 2;
- firework.bloomY = parseInt(firework.style.top) + parseInt(firework.style.height) / 2;
- firework.style.display = "none";
- firework.style.left = randomNUM(width / 4, width / 4 * 3) + "px";
- firework.style.top = height + "px";
- firework.style.background = randomRGB();
- firework.s = fireworkStyles[randomNUM(0, fireworkStyles.length)];
- firework.vx = 4 * (Math.random() - 0.5);
- firework.vy = 6 * (Math.random() - 1.5);
- fireworks.isMove = false;
- fireworks.isBloom = true;
- if (!fireworks.isFirst) fireworks[1].isReset = true;
- }
- }
- function makeFireball(firework) {
- var fireballs = [];
- for (var i = 0; i < 50; i++) {
- var fireball = document.createElement("div");
- fireball.className = "fireball";
- fireball.style.display = "none";
- fireball.style.width = "4px";
- fireball.style.height = "4px";
- fireball.style.left = firework.bloomX - parseInt(fireball.style.width) / 2 + "px";
- fireball.style.top = firework.bloomY - parseInt(fireball.style.height) / 2 + "px";
- fireball.style.opacity = 1;
- fireball.angle = Math.ceil(Math.random() * 360) * Math.PI / 180;
- fireball.vx = 2;
- fireball.vy = 2;
- fireball.style.background = firework.style.background;
- document.body.appendChild(fireball);
- fireballs[i] = fireball;
- fireballs.isOver = false;
- }
- return fireballs;
- }
- function resetFireball(firework, fireballs) {
- for (var i = 0; i < fireballs.length; i++) {
- var fireball = fireballs[i];
- fireball.style.display = "none";
- fireball.style.left = firework.bloomX - parseInt(fireball.style.width) / 2 + "px";
- fireball.style.top = firework.bloomY - parseInt(fireball.style.height) / 2 + "px";
- fireball.style.opacity = 1;
- fireball.angle = Math.ceil(Math.random() * 360 ) * Math.PI / 180;
- fireball.vx = 2;
- fireball.vy = 2;
- fireball.style.background = firework.style.background;
- }
- fireballs.isOver = false;
- }
- function bloomFireball(firework, fireballs) {
- for (var i = 0; i < fireballs.length; i++) {
- var fireball = fireballs[i];
- fireball.style.display = "block";
- fireball.style.left = parseInt(fireball.style.left) + fireball.vx * Math.cos(fireball.angle) + "px";
- fireball.style.top = parseInt(fireball.style.top) + fireball.vy * Math.sin(fireball.angle) + "px";
- fireball.style.opacity -= 0.02;
- fireball.angle *= firework.s;
- fireball.vx += 0.2;
- fireball.vy += 0.2;
- }
- var isOver = fireballs.every(function(fireball) {
- return fireball.style.opacity <= 0;
- });
- if (isOver) {
- fireballs.isOver = true;
- }
- }
- makeFirework();
- (function animate() {
- bigFireworks.forEach(function(fireworks) {
- if (fireworks.isMove) moveFirework(fireworks);
- if (fireworks.isBloom) {
- if (fireworks[1].count1 < fireworks[1].limit) {
- fireworks[1][fireworks[1].count1] = makeFireball(fireworks[0]);
- fireworks[1].count1 += 1;
- }
- if (fireworks[1].isReset) {
- if (fireworks[1].count2 < fireworks[1].limit) {
- resetFireball(fireworks[0], fireworks[1][fireworks[1].count2]);
- fireworks[1].count2 += 1;
- }
- }
- fireworks[1].forEach(function(fireballs) {
- bloomFireball(fireworks[0], fireballs);
- });
- if (fireworks[1].every(function(fireballs) {
- return fireballs.isOver === true;
- })) {
- fireworks.isBloom = false;
- fireworks.isMove = true;
- fireworks.isFirst = false;
- fireworks[1].count2 = 0;
- }
- }
- });
- requestAnimationFrame(animate);
- })();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/45516/f68e54fb375f5066aab849aecdf320a1.html