<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas梦幻背景动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
text-align: center;
padding: 2rem;
max-width: 800px;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: glow 2s ease-in-out infinite alternate;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.link {
color: #fff;
background: rgba(255, 255, 255, 0.2);
padding: 0.8rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.link:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
@keyframes glow {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073;
}
to {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6;
}
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="content">
<h1>梦幻星空背景</h1>
<p>这是一个使用HTML5 Canvas创建的梦幻星空动画特效，包含闪烁的星星、流动的粒子和彩色光晕效果。</p>
</div>
<script>
// 初始化Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 粒子数组
let particles = [];
const particleCount = Math.floor(window.innerWidth * window.innerHeight / 1000);
// 星星数组
let stars = [];
const starCount = 100;
// 颜色数组
const colors = [
'rgba(255, 0, 255, 0.5)',
'rgba(0, 255, 255, 0.5)',
'rgba(255, 255, 0, 0.5)',
'rgba(0, 255, 0, 0.5)',
'rgba(255, 0, 0, 0.5)'
];
// 粒子类
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
this.color = colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.x += this.speedX;
this.y += this.speedY;
// 边界检查
if (this.x < 0 || this.x > canvas.width) {
this.speedX = -this.speedX;
}
if (this.y < 0 || this.y > canvas.height) {
this.speedY = -this.speedY;
}
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
// 添加光晕效果
const gradient = ctx.createRadialGradient(
this.x, this.y, 0,
this.x, this.y, this.size * 3
);
gradient.addColorStop(0, this.color);
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
ctx.fill();
}
}
// 星星类
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 1.5 + 0.5;
this.brightness = Math.random();
this.speed = Math.random() * 0.05;
}
update() {
this.brightness += this.speed;
if (this.brightness > 1 || this.brightness < 0) {
this.speed = -this.speed;
}
}
draw() {
const alpha = 0.5 + 0.5 * Math.sin(this.brightness * Math.PI);
ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 初始化粒子
function initParticles() {
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
// 初始化星星
function initStars() {
stars = [];
for (let i = 0; i < starCount; i++) {
stars.push(new Star());
}
}
// 连接相近的粒子
function connectParticles() {
for (let a = 0; a < particles.length; a++) {
for (let b = a; b < particles.length; b++) {
const dx = particles[a].x - particles[b].x;
const dy = particles[a].y - particles[b].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
const opacity = 1 - distance / 100;
ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.2})`;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particles[a].x, particles[a].y);
ctx.lineTo(particles[b].x, particles[b].y);
ctx.stroke();
}
}
}
}
// 动画循环
function animate() {
ctx.fillStyle = 'rgba(15, 12, 41, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制粒子
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
// 更新和绘制星星
for (let i = 0; i < stars.length; i++) {
stars[i].update();
stars[i].draw();
}
// 连接粒子
connectParticles();
requestAnimationFrame(animate);
}
// 窗口大小改变时重置Canvas
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initParticles();
initStars();
});
// 鼠标移动时添加互动效果
window.addEventListener('mousemove', function(event) {
for (let i = 0; i < 5; i++) {
const particle = particles[Math.floor(Math.random() * particles.length)];
particle.x = event.x + (Math.random() * 50 - 25);
particle.y = event.y + (Math.random() * 50 - 25);
}
});
// 初始化并开始动画
initParticles();
initStars();
animate();
</script>
</body>
</html>
扫一扫
2785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
