网页背景粒子动画

原创已于 2025-06-27 13:25:44 修改 · 539 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-07 15:23:14 首次发布

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
overflow: hidden;
background: #000;
color: #fff;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}

.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
text-align: center;
}

h1 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

p {
font-size: 1.2rem;
max-width: 800px;
margin-bottom: 30px;
line-height: 1.6;
}

.btn {
display: inline-block;
padding: 12px 30px;
background: rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
font-size: 1rem;
margin: 10px;
}

.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.footer {
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}

.footer a {
color: white;
text-decoration: none;
font-weight: bold;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<div id="particles-js"></div>


<div class="content">
<h1>粒子背景动画效果</h1>
<p>这是一个使用JavaScript创建的动态粒子背景效果。粒子会随机移动，当鼠标靠近时会与粒子产生互动效果。</p>
<div>
<a href="#" class="btn">开始体验</a>
<a href="#" class="btn">了解更多</a>
</div>
</div>

<div class="footer">

</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
// 粒子配置
const config = {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: true,
speed: 2,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: true,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
};

// 初始化粒子动画
function initParticles() {
const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
document.getElementById('particles-js').appendChild(canvas);

const ctx = canvas.getContext('2d');
let particles = [];
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

// 创建粒子
function createParticles() {
particles = [];
for (let i = 0; i < config.particles.number.value; i++) {
particles.push({
x: Math.random() * w,
y: Math.random() * h,
size: config.particles.size.value,
color: config.particles.color.value,
opacity: config.particles.opacity.value,
speedX: (Math.random() - 0.5) * config.particles.move.speed,
speedY: (Math.random() - 0.5) * config.particles.move.speed
});
}
}

// 绘制粒子
function drawParticles() {
ctx.clearRect(0, 0, w, h);

for (let i = 0; i < particles.length; i++) {
const p = particles[i];

ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity})`;
ctx.fill();

// 连线
if (config.particles.line_linked.enable) {
for (let j = i + 1; j < particles.length; j++) {
const p2 = particles[j];
const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));

if (distance < config.particles.line_linked.distance) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = `rgba(255, 255, 255, ${config.particles.line_linked.opacity * (1 - distance / config.particles.line_linked.distance)})`;
ctx.lineWidth = config.particles.line_linked.width;
ctx.stroke();
}
}
}
}
}

// 更新粒子位置
function updateParticles() {
for (let i = 0; i < particles.length; i++) {
const p = particles[i];

// 移动粒子
p.x += p.speedX;
p.y += p.speedY;

// 边界检查
if (p.x < 0 || p.x > w) p.speedX *= -1;
if (p.y < 0 || p.y > h) p.speedY *= -1;

// 随机变化
if (Math.random() > 0.9) {
p.speedX += (Math.random() - 0.5) * 0.2;
p.speedY += (Math.random() - 0.5) * 0.2;
}

// 限制速度
const maxSpeed = config.particles.move.speed * 1.5;
const speed = Math.sqrt(p.speedX * p.speedX + p.speedY * p.speedY);
if (speed > maxSpeed) {
p.speedX = (p.speedX / speed) * maxSpeed;
p.speedY = (p.speedY / speed) * maxSpeed;
}
}
}

// 动画循环
function animate() {
updateParticles();
drawParticles();
requestAnimationFrame(animate);
}

// 鼠标交互
let mouseX = 0;
let mouseY = 0;
let mouseRadius = 100;

canvas.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;

if (config.interactivity.events.onhover.enable) {
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const distance = Math.sqrt(Math.pow(p.x - mouseX, 2) + Math.pow(p.y - mouseY, 2));

if (distance < mouseRadius) {
const angle = Math.atan2(p.y - mouseY, p.x - mouseX);
const force = (mouseRadius - distance) / mouseRadius * 2;

p.x += Math.cos(angle) * force;
p.y += Math.sin(angle) * force;
}
}
}
});

// 点击交互
canvas.addEventListener('click', function(e) {
if (config.interactivity.events.onclick.enable) {
for (let i = 0; i < 5; i++) {
particles.push({
x: e.clientX,
y: e.clientY,
size: Math.random() * 5 + 2,
color: config.particles.color.value,
opacity: 0.8,
speedX: (Math.random() - 0.5) * 5,
speedY: (Math.random() - 0.5) * 5
});
}
}
});

// 窗口大小调整
window.addEventListener('resize', function() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
});

// 初始化
createParticles();
animate();
}

initParticles();
});
</script>
</body>
</html>