当您移动鼠标时，黑洞会随之移动，并且周围的文字和粒子会被黑洞吸引并逐渐靠近黑洞中心。
HTML部分：定义了一个表示黑洞的div元素。
CSS部分：
- 设置了基本的样式，包括背景颜色、禁用文本选择等。
- 定义了黑洞和粒子的基本样式。
JavaScript部分：
- 创建了一个函数
createParticle来生成每个粒子的div元素。 - 创建了一个函数
createTextParticle来生成每个文字粒子的div元素。 - 定义了一个
animate函数来更新每个粒子的位置，使其被黑洞吸引并逐渐靠近黑洞中心。 - 使用
requestAnimationFrame来持续更新动画。 - 定义了两个函数
spawnRandomParticles和spawnRandomTextParticles来随机生成粒子和文字粒子。 - 监听鼠标移动事件，动态更新黑洞的位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑洞特效</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
user-select: none; /* 禁止选中文本 */
}
.black-hole {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: black;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
}
.particle {
position: absolute;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
}
.text-particle {
position: absolute;
font-size: 16px;
color: white;
}
</style>
</head>
<body>
<div class="black-hole" id="blackHole"></div>
<script>
const blackHole = document.getElementById('blackHole');
const particles = [];
const textParticles = [];
function createParticle(x, y) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
document.body.appendChild(particle);
particles.push({ element: particle, x, y });
}
function createTextParticle(text, x, y) {
const textParticle = document.createElement('div');
textParticle.className = 'text-particle';
textParticle.textContent = text;
textParticle.style.left = `${x}px`;
textParticle.style.top = `${y}px`;
document.body.appendChild(textParticle);
textParticles.push({ element: textParticle, x, y });
}
function animate() {
const blackHoleRect = blackHole.getBoundingClientRect();
const centerX = blackHoleRect.left + blackHoleRect.width / 2;
const centerY = blackHoleRect.top + blackHoleRect.height / 2;
for (const particle of particles) {
const dx = centerX - particle.x;
const dy = centerY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 0) {
const force = 1000 / distance;
particle.x += (dx / distance) * force;
particle.y += (dy / distance) * force;
}
particle.element.style.left = `${particle.x}px`;
particle.element.style.top = `${particle.y}px`;
if (distance < 50) {
particle.element.remove();
particles.splice(particles.indexOf(particle), 1);
}
}
for (const textParticle of textParticles) {
const dx = centerX - textParticle.x;
const dy = centerY - textParticle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 0) {
const force = 1000 / distance;
textParticle.x += (dx / distance) * force;
textParticle.y += (dy / distance) * force;
}
textParticle.element.style.left = `${textParticle.x}px`;
textParticle.element.style.top = `${textParticle.y}px`;
if (distance < 50) {
textParticle.element.remove();
textParticles.splice(textParticles.indexOf(textParticle), 1);
}
}
requestAnimationFrame(animate);
}
function spawnRandomParticles(num) {
for (let i = 0; i < num; i++) {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createParticle(x, y);
}
}
function spawnRandomTextParticles(num) {
const text = "网页特效库";
for (let i = 0; i < num; i++) {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createTextParticle(text[Math.floor(Math.random() * text.length)], x, y);
}
}
// 初始位置随机生成粒子和文字粒子
spawnRandomParticles(100);
spawnRandomTextParticles(50);
// 动画循环
animate();
// 监听鼠标移动事件，更新黑洞位置
document.addEventListener('mousemove', (event) => {
blackHole.style.left = `${event.clientX - 50}px`; // 50 是黑洞宽度的一半
blackHole.style.top = `${event.clientY - 50}px`; // 50 是黑洞高度的一半
});
</script>
</body>
</html>
No responses yet