貌似3D效果的JS煙花背景特效代碼

2024-09-05 12:21:57

字體：大中小

來源：轉載

供稿：網友

貌似3D效果的JS煙花背景特效代碼，煙花展開的一瞬間，很漂亮，很有空間感，漂漂灑灑，慢慢退去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>煙花背景代碼</title></head><style type="text/css">.fire{display:block; overflow:hidden; font-size:12px; position:absolute};body{overflow:hidden; background:#000}html{overflow:hidden; background:#000}</style><body></body><script type="text/javascript">var Fire = function(r, color) {	this.radius = r || 12;	this.color = color || "FF6600";	this.xpos = 0;	this.ypos = 0;	this.zpos = 0;	this.vx = 0;	this.vy = 0;	this.vz = 0;	this.mass = 1;	this.p = document.createElement("span");	this.p.className = "fire";	this.p.innerHTML = "*";	this.p.style.fontSize = this.radius + "px";	this.p.style.color = "#" + this.color;}Fire.prototype = {	append: function(parent) {		parent.appendChild(this.p);	},	setSize: function(scale) {		this.p.style.fontSize = this.radius * scale + "px";	},	setPosition:function(x, y) {		this.p.style.left = x + "px";		this.p.style.top =  y + "px";	},	setVisible: function(b) {		this.p.style.display = b ? "block" : "none";	}}var fireworks = function() {	var fires = new Array();	var count = 100;	var fl = 250;	var vpx = 500;	var vpy = 300;	var gravity = .3;	var floor = 200;	var bounce = -.8;	var timer;	return {		init: function() {			for (var i=0; i<count; i++) {				var color = 0xFF0000;				color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];				while(color.length < 6) {					color = "0" + color;				}				var fire = new Fire(12, color);				fires.push(fire);				fire.ypos = -100;				fire.vx = Math.random() * 6 - 3;				fire.vy = Math.random() * 6 - 3;				fire.vz = Math.random() * 6 - 3;				fire.append(document.body);			}			var that = this;			timer = setInterval(function() {				for (var i=0;i<count; i++) {					that.move(fires[i]);				}			}, 30);		},		move: function(fire) {			fire.vy += gravity;			fire.xpos += fire.vx;			fire.ypos += fire.vy;			fire.zpos += fire.vz;			if (fire.ypos > floor) {				fire.ypos = floor;				fire.vy *= bounce;			}			if (fire.zpos > -fl) {				var scale = fl/ (fl+fire.zpos);				fire.setSize(scale);				fire.setPosition(vpx + fire.xpos * scale,								 vpy + fire.ypos * scale);				fire.setVisible(true);			} else {				fire.setVisible(false);			}		}	}}fireworks().init();</script></html>

上一篇：第二種JavaScript放煙花代碼

下一篇：鼠標點擊屏幕背景變暗的代碼

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注