css 模仿火效果

时间：2022-07-02 15:45:36 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.*w**3.org/TR/REC-html40/loose.dtd">

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

<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>

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

推荐专题

最新下载

热门教程

css 模仿火效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程