520烟花html代码
时间: 2024-05-26 18:09:33 浏览: 147
520烟花HTML代码是一种网页特效,它可以在网页中产生美丽的烟花效果。以下是一个简单的520烟花HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>520烟花</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/animejs/2.0.2/anime.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
<script>
// 点击页面时触发烟花效果
$(document).click(function(event) {
createFirework(event.pageX, event.pageY);
});
// 创建烟花函数
function createFirework(startX, startY) {
// 定义烟花参数
var numParticles = 100;
var minRadius = 3;
var maxRadius = 5;
var minSpeed = 60.0;
var maxSpeed = 80.0;
var minScaleSpeed = 1.0;
var maxScaleSpeed = 4.0;
// 创建烟花粒子
var particles = [];
for (var i = 0; i < numParticles; i++) {
var particle = new Object();
particle.x = startX;
particle.y = startY;
particle.radius = _.random(minRadius, maxRadius);
particle.color = '#'+(Math.random()*0xffffff<<0).toString(16);
var speed = _.random(minSpeed, maxSpeed);
var direction = _.random(0, 360) * Math.PI / 180;
particle.xSpeed = speed * Math.cos(direction);
particle.ySpeed = speed * Math.sin(direction);
particle.scaleSpeed = _.random(minScaleSpeed, maxScaleSpeed);
particles.push(particle);
}
// 创建烟花动画
anime({
targets: particles,
x: function(particle) { return particle.x + particle.xSpeed * 60 / 1000; },
y: function(particle) { return particle.y + particle.ySpeed * 60 / 1000; },
radius: 0,
scaleX: function(particle) { return particle.scaleX - particle.scaleSpeed * 60 / 1000; },
scaleY: function(particle) { return particle.scaleY - particle.scaleSpeed * 60 / 1000; },
easing: 'easeOutExpo',
duration: 1500,
complete: function() {
particles.splice(_.findIndex(particles, ['radius', 0]), numParticles);
}
});
}
// 窗口大小改变时重新生成画布
$(window).resize(function(event) {
$('#canvas').attr('width', $(window).width());
$('#canvas').attr('height', $(window).height());
});
$(window).resize();
</script>
</body>
</html>
```
以上代码使用了HTML、CSS和JavaScript语言,通过创建画布和粒子动画实现了520烟花效果。点击页面即可触发烟花效果,可以根据需要调整参数实现不同的效果。
阅读全文