css 模仿火效果

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<html>
<head>
<title>火焰</title>
<script language="JavaScript">
function PixelAxis(left, bottom, width, height, color)
{
	color = color || "#000000";
	var pixels = [];
	for(var i = 0; i <= width; i++)
	{
		pixels[i] = [];
		for(var j = 0; j<=height; j++)
		{
			var img = new Image(1, 1);
			img.style.backgroundColor = color;
			img.style.position = "absolute";
			img.style.left = left + i;
			img.style.top = bottom - j;
			pixels[i][j] = img;
			document.body.appendChild(img);
		}
	}
	return function(x, y, color)
	{
		pixels[x][y].style.backgroundColor = color;
	}
}

function color(r, g ,b)
{
    r = r > 0xF ? r.toString(16) : "0" + r.toString(16);
	g = g > 0xF ? g.toString(16) : "0" + g.toString(16);
	b = b > 0xF ? b.toString(16) : "0" + b.toString(16);
	return "#"+r+g+b;
}
function fireColor(seed)
{
	return color(seed, Math.floor(0.5*seed), 0);
}

function spreadSeeds(width, height)
{
	var pixel = PixelAxis(200, 200, width, height);
	var fc = [];
	fc[0] = [];

return function()
	{
		for(var i = 0; i <= width; i++)
		{
			var s = Math.floor(255 * Math.random());
			fc[0][i] = s;
			pixel(i, 0, fireColor(s));
		}
		for(var i = 1; i < height; i++)
		{
			fc[i] = [];
			for(var j = 0; j <= width; j++)
			{
				var a = j > 0 ? fc[i-1][j-1] : 0;
				var b = fc[i-1][j];
				var c = j < width ? fc[i-1][j+1] : 0;
				var s = Math.floor((a+b+c)/3);
				//alert(c);
				fc[i][j] = s;
				s = s-Math.floor(i/height*255); 
				s = s > 0 ? s : 0;
				pixel(j, i, fireColor(s));
			}
		}
	}
}

</script>
</head>
<body bgcolor="#000000">

</body>
<script>
	var f = spreadSeeds(60, 120);
	setInterval("f()",1);
</script>
<a href=http://111com.net>www.111com.net</a>
</html>

提示：您可以先修改部分代码再运行