中间加烟花特效显示的字“姐姐我错啦”
时间: 2023-09-11 21:05:50 浏览: 49
以下是一个示例代码,用于在页面中心添加一个“姐姐我错啦”文字,并在点击页面时触发烟花特效:
```html
<!DOCTYPE html>
<html>
<head>
<title>烟花特效</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
color: white;
font-size: 50px;
font-weight: bold;
font-family: Arial, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div id="text">姐姐我错啦</div>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var particles = [];
function Particle(x, y, radius, color, speed, angle) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.speed = speed;
this.angle = angle;
this.update = function() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.speed -= 0.1;
this.radius -= 0.1;
}
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
function createParticles(x, y, color) {
for (var i = 0; i < 30; i++) {
var radius = Math.random() * 3 + 2;
var speed = Math.random() * 5 + 1;
var angle = Math.random() * Math.PI * 2;
particles.push(new Particle(x, y, radius, color, speed, angle));
}
}
document.addEventListener("click", function(event) {
var x = event.clientX;
var y = event.clientY;
createParticles(x, y, "white");
});
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].radius < 0.1) {
particles.splice(i, 1);
i--;
}
}
}
var text = document.getElementById("text");
text.style.position = "absolute";
text.style.top = "50%";
text.style.left = "50%";
text.style.transform = "translate(-50%, -50%)";
animate();
</script>
</body>
</html>
```
在这段代码中,我们首先在页面中心添加了一个`<div>`元素,其中包含了“姐姐我错啦”这个文本。然后,我们使用Canvas API创建了一个Canvas元素,并在点击页面时在点击位置生成一些随机的粒子,并且不断更新和绘制这些粒子以实现烟花效果。
注意,我们在CSS中将页面背景设置为黑色,并将文本颜色设置为白色,以使烟花效果更加突出。我们还将文本的位置设置为页面中心,以使其居中显示。最后,我们在文本元素上添加了一个`cursor: pointer`样式,以将鼠标指针改为手型,以提醒用户可以点击页面。