貌似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放烟花代码

下一篇：鼠标点击屏幕背景变暗的代码

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注