<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday! 🎂</title>
<!-- 引入 Canvas-Confetti 礼花特效库 -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: #0f0c20;
color: #fff;
overflow-x: hidden;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* 动态背景 canvas */
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 主体卡片容器 */
.glass-card {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 182, 193, 0.3);
border-radius: 24px;
padding: 40px;
max-width: 800px;
width: 90%;
box-shadow: 0 8px 32px 0 rgba(235, 104, 161, 0.2);
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
animation: floatCard 4s ease-in-out infinite alternate;
}
@keyframes floatCard {
0% { transform: translateY(0px); }
100% { transform: translateY(-12px); }
}
/* 头像区域 */
.avatar-container {
position: relative;
flex-shrink: 0;
}
.avatar {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ff79c6;
box-shadow: 0 0 20px #ff79c6;
}
/* 文本与按钮区域 */
.content {
display: flex;
flex-direction: column;
gap: 15px;
}
.tag {
display: inline-block;
background: linear-gradient(90deg, #ff79c6, #bd93f9);
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: bold;
width: fit-content;
}
h1 {
font-size: 2.2rem;
background: linear-gradient(90deg, #ff9a9e, #fecfef, #a1c4fd);
-webkit-background-clip: text;
color: transparent;
font-weight: 800;
}
p {
line-height: 1.6;
color: #e2e8f0;
font-size: 1.05rem;
}
/* 魔法按钮 */
.magic-btn {
margin-top: 10px;
padding: 12px 28px;
border: none;
border-radius: 25px;
background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
color: white;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);
transition: all 0.3s ease;
width: fit-content;
}
.magic-btn:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 117, 140, 0.7);
}
/* 模态弹窗 */
.modal {
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
}
.modal-content {
background: #1e1b2e;
border: 2px solid #ff79c6;
padding: 30px;
border-radius: 20px;
max-width: 450px;
text-align: center;
box-shadow: 0 0 30px rgba(255, 121, 198, 0.5);
animation: popIn 0.3s ease;
}
@keyframes popIn {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.close-btn {
margin-top: 20px;
padding: 8px 20px;
background: #bd93f9;
border: none;
color: white;
border-radius: 12px;
cursor: pointer;
}
/* 移动端适配 */
@media (max-width: 600px) {
.glass-card {
flex-direction: column;
text-align: center;
}
.content {
align-items: center;
}
}
</style>
</head>
<body>
<!-- 粒子星空 Canvas -->
<canvas id="bg-canvas"></canvas>
<!-- 主卡片 -->
<div class="glass-card">
<div class="avatar-container">
<!-- 替换下方 src 为她喜欢的二次元角色图片链接，或本地图片 -->
<img src="https://images.unsplash.com/photo-1578632767115-351597cf2477?w=500" alt="Avatar" class="avatar">
</div>
<div class="content">
<span class="tag">LV.18 限量版解锁 ✦</span>
<h1>生日快乐，星河万顷皆是你！</h1>
<p>
愿你在新的一岁里，继续保持无敌的可爱与勇敢！<br>
就像二次元世界里的主角一样，去闯荡属于你的星辰大海吧 ✨
</p>
<button class="magic-btn" onclick="triggerMagic()">✨ 开启专属生日魔法</button>
</div>
</div>
<!-- 弹窗彩蛋 -->
<div class="modal" id="magicModal">
<div class="modal-content">
<h2 style="color: #ff79c6; margin-bottom: 10px;">🎉 魔法施展成功！</h2>
<p style="color: #ddd;">
这是为你搭建的专属小天地。<br>
祝你每一天都像动漫里的主角一样开挂，永远快乐，永远被爱包围！
</p>
<button class="close-btn" onclick="closeModal()">收下祝福 💖</button>
</div>
</div>
<script>
// 1. 动态星空粒子效果
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 0.5;
this.speedX = (Math.random() - 0.5) * 0.5;
this.speedY = (Math.random() - 0.5) * 0.5;
this.color = `hsl(${Math.random() * 60 + 280}, 80%, 75%)`;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
for (let i = 0; i < 80; i++) {
particles.push(new Particle());
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.update();
p.draw();
});
requestAnimationFrame(animate);
}
animate();
// 2. 魔法按钮点击交互（烟花雨）
function triggerMagic() {
// 触发炫彩礼花特效
confetti({
particleCount: 120,
spread: 80,
origin: { y: 0.6 },
colors: ['#ff79c6', '#bd93f9', '#ffb86c', '#8be9fd']
});
// 延迟打开弹窗
setTimeout(() => {
document.getElementById('magicModal').style.display = 'flex';
}, 500);
}
function closeModal() {
document.getElementById('magicModal').style.display = 'none';
}
</script>
</body>
</html>