javascript实现烟花效果

最新推荐文章于 2024-07-09 18:06:29 发布

m0_46381538

最新推荐文章于 2024-07-09 18:06:29 发布

阅读量760

点赞数 1

本文链接：https://blog.csdn.net/m0_46381538/article/details/104663819

版权

本文介绍了如何利用JavaScript实现烟花效果，包括CSS和JavaScript代码的详细实现，最终展示了一个炫酷的烟花绽放的动态效果。

摘要由CSDN通过智能技术生成

css部分代码

		**{margin: 0;padding: 0;}
		#container{
				width: 100%;
				height: 1000px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				background: url(../../day17/代码/img/bg.jpg) repeat fixed center;
			}
			.fire{
				width: 20px;
				height:20px;
				position: absolute;
				bottom: 0;
				border-radius: 50%;
			}
			.small-fire{
				width: 10px;
				height:10px;
				position: absolute;
				border-radius: 50%;
			}*

body部分代码

	*<div id="container"></div>*

js部分代码

	class Fire{
		constructor(pos){
			this.cont = document.getElementById("container");
			this.x = pos.x;
			this.y = pos.y;
		}
		create(){
			this.f = document.createElement("div");
			this.f.className = "fire";
			this.f.style.background = randomColor();
			this.cont.appendChild(this.f);
			this.f.