rendered paste body<!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 { background: linear-gradient(180deg, #0a0a1a 0%, #111133 40%, #1a1a3e 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; color: #fff; } /* ===== 画布层 ===== */ #starfield, #fireworks { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #starfield { z-index: 0; } #fireworks { z-index: 1; } /* ===== 主内容 ===== */ .container { position: relative; z-index: 2; text-align: center; padding: 20px; } /* 国旗飘落 */ .flag { position: fixed; font-size: 28px; animation: fall linear infinite; z-index: 1; opacity: 0.6; pointer-events: none; } @keyframes fall { 0% { transform: translateY(-60px) rotate(0deg) translateX(0); opacity: 0.7; } 25% { transform: translateY(25vh) rotate(90deg) translateX(20px); } 50% { transform: translateY(50vh) rotate(180deg) translateX(-15px); } 75% { transform: translateY(75vh) rotate(270deg) translateX(10px); } 100% { transform: translateY(110vh) rotate(360deg) translateX(0); opacity: 0; } } /* 标题 */ .title { font-size: 44px; font-weight: 800; background: linear-gradient(90deg, #ffffff, #cccccc, #ffffff, #cccccc); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite, fadeUp 1.2s 0.5s forwards; opacity: 0; text-shadow: none; filter: drop-shadow(0 0 20px rgba(255, 217, 61, 0.3)); } @keyframes shimmer { to { background-position: 300% center; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 副标题 */ .subtitle { font-size: 16px; color: rgba(255,255,255,0.5); margin-top: 8px; opacity: 0; animation: fadeUp 1s 1.5s forwards; letter-spacing: 4px; } /* 打字机 */ .typewriter { font-size: 17px; line-height: 2.2; min-height: 140px; margin: 24px auto; max-width: 440px; text-align: left; white-space: pre-wrap; } .cursor { display: inline-block; width: 2px; height: 1em; background: #ffd93d; animation: blink 0.6s step-end infinite; vertical-align: text-bottom; } @keyframes blink { 50% { opacity: 0; } } /* 隐藏按钮 - 脉冲光晕 */ .secret-btn { margin-top: 28px; padding: 14px 36px; border: 2px solid #ffd93d; background: transparent; color: #ffd93d; font-size: 16px; border-radius: 30px; cursor: pointer; opacity: 0; animation: fadeUp 1s 8s forwards, pulse 2s 9s ease-in-out infinite; transition: all 0.4s; position: relative; overflow: visible; } .secret-btn::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 34px; border: 2px solid rgba(255, 217, 61, 0.3); animation: pulseRing 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.4); } 50% { box-shadow: 0 0 20px 8px rgba(255, 217, 61, 0.2); } } @keyframes pulseRing { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0; } } .secret-btn:hover { background: #ffd93d; color: #1a1a3e; transform: scale(1.08); box-shadow: 0 0 30px rgba(255, 217, 61, 0.6); } /* 隐藏心意 */ .heart-reveal { margin-top: 24px; font-size: 20px; color: #ff9a9a; opacity: 0; transform: translateY(20px); transition: all 1.5s ease; } .heart-reveal.show { opacity: 1; transform: translateY(0); } .heart-reveal .heart { display: inline-block; animation: heartbeat 1s ease-in-out infinite; font-size: 28px; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } 60% { transform: scale(1); } } /* 底部 */ .footer { position: fixed; bottom: 16px; font-size: 12px; color: rgba(255,255,255,0.25); z-index: 2; letter-spacing: 2px; }</style></head><body><canvas id="starfield"></canvas><canvas id="fireworks"></canvas><div class="container"> <div class="title">帅恒 国庆快乐</div> <div class="subtitle">— 2026 · 一份悄悄的祝福 —</div> <div class="typewriter" id="typewriter"><span class="cursor"></span></div> <button class="secret-btn" id="secretBtn" onclick="revealHeart()"> ✨ 点我领取隐藏祝福 </button> <div class="heart-reveal" id="heartReveal"> <span class="heart">🎆</span><br> 其实……<br> 这个假期最想见的人是你，<br> 在这人来人往的世界里，每个人都有自己的节奏与底色，<br> 每个人都有独属于自己的光芒，<br> 而你那份恰好照射到我，<br> 温暖且让人依赖。<br> 你们河南竞争大，你不要有太大的压力<br> 尽力就好，开心最重要！<br> 提前祝你高考取得一个令你满意的成绩。<br> 愿你往后的日子里少些烦恼与疲惫<br> 多几分欢喜与安然<br><br> <small style="color:rgba(255,255,255,0.45);font-size:14px;"> （加油！相信自己！） </small> </div></div><div class="footer">2026.10.01</div><script>// ========== 1. 星空背景 ==========const starCanvas = document.getElementById('starfield');const sCtx = starCanvas.getContext('2d');starCanvas.width = window.innerWidth;starCanvas.height = window.innerHeight;window.addEventListener('resize', () => { starCanvas.width = window.innerWidth; starCanvas.height = window.innerHeight; initStars();});class Star { constructor() { this.reset(); } reset() { this.x = Math.random() * starCanvas.width; this.y = Math.random() * starCanvas.height * 0.85; this.size = Math.random() * 2; this.alpha = Math.random(); this.speed = 0.005 + Math.random() * 0.015; this.direction = Math.random() > 0.5 ? 1 : -1; } update() { this.alpha += this.speed * this.direction; if (this.alpha >= 1) { this.alpha = 1; this.direction = -1; } if (this.alpha <= 0.1) { this.alpha = 0.1; this.direction = 1; } } draw() { sCtx.beginPath(); sCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2); sCtx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`; sCtx.fill(); }}let stars = [];function initStars() { stars = []; const count = Math.min(200, Math.floor(starCanvas.width * starCanvas.height / 5000)); for (let i = 0; i < count; i++) stars.push(new Star());}initStars();// ========== 2. 流星 ==========class ShootingStar { constructor() { this.reset(); } reset() { this.x = Math.random() * starCanvas.width; this.y = Math.random() * starCanvas.height * 0.4; this.len = 60 + Math.random() * 80; this.speed = 6 + Math.random() * 6; this.angle = Math.PI / 5 + Math.random() * 0.3; this.alpha = 1; this.decay = 0.01 + Math.random() * 0.015; this.active = false; } launch() { this.reset(); this.active = true; } update() { if (!this.active) return; this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed; this.alpha -= this.decay; if (this.alpha <= 0) this.active = false; } draw() { if (!this.active) return; const tailX = this.x - Math.cos(this.angle) * this.len; const tailY = this.y - Math.sin(this.angle) * this.len; const grad = sCtx.createLinearGradient(this.x, this.y, tailX, tailY); grad.addColorStop(0, `rgba(255, 255, 255, ${this.alpha})`); grad.addColorStop(1, `rgba(255, 255, 255, 0)`); sCtx.beginPath(); sCtx.moveTo(this.x, this.y); sCtx.lineTo(tailX, tailY); sCtx.strokeStyle = grad; sCtx.lineWidth = 1.5; sCtx.stroke(); }}const shootingStars = [new ShootingStar(), new ShootingStar()];setInterval(() => { const idle = shootingStars.find(s => !s.active); if (idle) idle.launch();}, 3000 + Math.random() * 4000);// ========== 3. 国旗飘落 ==========function createFlag() { const flag = document.createElement('div'); flag.className = 'flag'; flag.textContent = ['帅恒','🎆','✨','🎇'][Math.floor(Math.random()*4)]; flag.style.left = Math.random() * 100 + 'vw'; flag.style.animationDuration = (5 + Math.random() * 5) + 's'; flag.style.fontSize = (16 + Math.random() * 18) + 'px'; document.body.appendChild(flag); setTimeout(() => flag.remove(), 10000);}setInterval(createFlag, 500);// ========== 4. 打字机 ==========const messages = [ "国庆快乐 超级帅帅帅的恒", "", "愿你的假期——", "有吃不完的零食 🍿", "睡到自然醒的早晨 🌙", "和刚刚好的好心情 ☀️", "", "如果可以的话……", "以后一起去看看烟花吧 🎆",];let lineIndex = 0, charIndex = 0;const twEl = document.getElementById('typewriter');const cursor = twEl.querySelector('.cursor');function typeLine() { if (lineIndex >= messages.length) { cursor.style.display = 'none'; return; } const line = messages[lineIndex]; if (charIndex < line.length) { const span = document.createElement('span'); span.textContent = line[charIndex]; span.style.opacity = '0'; span.style.transition = 'opacity 0.15s'; twEl.insertBefore(span, cursor); requestAnimationFrame(() => span.style.opacity = '1'); charIndex++; setTimeout(typeLine, 70); } else { twEl.appendChild(document.createElement('br')); lineIndex++; charIndex = 0; setTimeout(typeLine, 350); }}setTimeout(typeLine, 1200);// ========== 5. 烟花 Canvas ==========const fwCanvas = document.getElementById('fireworks');const fCtx = fwCanvas.getContext('2d');fwCanvas.width = window.innerWidth;fwCanvas.height = window.innerHeight;window.addEventListener('resize', () => { fwCanvas.width = window.innerWidth; fwCanvas.height = window.innerHeight;});class Particle { constructor(x, y, color, isHeart = false) { this.x = x; this.y = y; this.color = color; this.alpha = 1; this.decay = 0.008 + Math.random() * 0.018; const angle = Math.random() * Math.PI * 2; const speed = isHeart ? 2 + Math.random() * 3 : 1 + Math.random() * 5; this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.isHeart = isHeart; this.size = isHeart ? 8 : 1.5 + Math.random() * 2; this.trail = []; } update() { this.trail.push({ x: this.x, y: this.y, alpha: this.alpha }); if (this.trail.length > 4) this.trail.shift(); this.x += this.vx; this.y += this.vy; this.vy += 0.035; this.vx *= 0.99; this.alpha -= this.decay; } draw() { // 拖尾 this.trail.forEach((t, i) => { fCtx.beginPath(); fCtx.arc(t.x, t.y, this.size * 0.5, 0, Math.PI * 2); fCtx.fillStyle = this.isHeart ? `rgba(255,107,107,${t.alpha * 0.3 * (i/this.trail.length)})` : `${this.color.replace('1)', `${t.alpha * 0.3 * (i/this.trail.length)})`)}`; fCtx.fill(); }); fCtx.save(); fCtx.globalAlpha = this.alpha; if (this.isHeart) { fCtx.font = this.size + 'px serif'; fCtx.fillText('❤️', this.x, this.y); } else { fCtx.beginPath(); fCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2); fCtx.fillStyle = this.color; fCtx.fill(); // 发光 fCtx.shadowBlur = 8; fCtx.shadowColor = this.color; fCtx.fill(); } fCtx.restore(); }}let particles = [];const colors = [ 'rgba(255,107,107,1)', 'rgba(255,217,61,1)', 'rgba(107,203,119,1)', 'rgba(77,150,255,1)', 'rgba(255,107,203,1)', 'rgba(255,255,255,1)'];function explode(x, y) { const color = colors[Math.floor(Math.random() * colors.length)]; const count = 50 + Math.floor(Math.random() * 30); for (let i = 0; i < count; i++) particles.push(new Particle(x, y, color));}function launchHeart() { const x = Math.random() * fwCanvas.width; const y = Math.random() * fwCanvas.height * 0.5; for (let i = 0; i < 10; i++) particles.push(new Particle(x, y, 'rgba(255,107,107,1)', true));}// 自动烟花setInterval(() => { explode( fwCanvas.width * 0.15 + Math.random() * fwCanvas.width * 0.7, fwCanvas.height * 0.1 + Math.random() * fwCanvas.height * 0.35 );}, 1200);function animate() { // 星空 sCtx.clearRect(0, 0, starCanvas.width, starCanvas.height); stars.forEach(s => { s.update(); s.draw(); }); shootingStars.forEach(s => { s.update(); s.draw(); }); // 烟花 - 半透明清除制造残影 fCtx.fillStyle = 'rgba(10, 10, 26, 0.15)'; fCtx.fillRect(0, 0, fwCanvas.width, fwCanvas.height); particles = particles.filter(p => p.alpha > 0); particles.forEach(p => { p.update(); p.draw(); }); requestAnimationFrame(animate);}animate();// ========== 6. 隐藏心意 ==========function revealHeart() { document.getElementById('heartReveal').classList.add('show'); document.getElementById('secretBtn').style.display = 'none'; // 爱心烟花连发 for (let i = 0; i < 40; i++) setTimeout(() => launchHeart(), i * 80); // 再放几波大烟花庆祝 for (let i = 0; i < 5; i++) { setTimeout(() => explode( fwCanvas.width * 0.2 + Math.random() * fwCanvas.width * 0.6, fwCanvas.height * 0.15 + Math.random() * fwCanvas.height * 0.3 ), i * 300); }}</script></body></html>