HTML点击鼠标动态特效,屏幕生成特效火花特效

效果视频:

火花视频html+js

直接上代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>Mouse Click Effect</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000;
		}
		canvas {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ctx = canvas.getContext("2d");
		var particles = [];
		var particleCount = 100;
		var particleRadius = 3;
		var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b"];
		canvas.addEventListener("mousedown", function(e) {
			for (var i = 0; i < particleCount; i++) {
				particles.push(new createParticle(e.clientX, e.clientY));
			}
		});
		function createParticle(x, y) {
			this.x = x;
			this.y = y;
			this.vx = Math.random() * 10 - 5;
			this.vy = Math.random() * 10 - 5;
			this.color = colors[Math.floor(Math.random() * colors.length)];
			this.radius = particleRadius;
			this.alpha = 1;
			this.draw = function() {
				ctx.globalAlpha = this.alpha;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (var i = 0; i < particles.length; i++) {
				particles[i].x += particles[i].vx;
				particles[i].y += particles[i].vy;
				particles[i].alpha -= 0.01;
				if (particles[i].alpha <= 0) {
					particles.splice(i, 1);
				} else {
					particles[i].draw();
				}
			}
			requestAnimationFrame(draw);
		}
		draw();
	</script>
</body>
</html>
相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript