<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>给最爱的你</title> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; font-family: 'Arial', sans-serif; }
.container { text-align: center; z-index: 1; color: #fff; }
h1 { font-size: 3em; margin-bottom: 20px; text-shadow: 0 0 10px #ff69b4; animation: glow 2s infinite alternate; }
p { font-size: 1.5em; line-height: 1.6; max-width: 600px; margin: 0 auto 30px; }
.btn { display: inline-block; padding: 15px 30px; background: #ff69b4; color: white; text-decoration: none; border-radius: 50px; font-size: 1.2em; transition: all 0.3s; border: 2px solid #ff69b4; }
.btn:hover { background: transparent; color: #ff69b4; transform: scale(1.1); }
.heart { position: absolute; pointer-events: none; animation: animate 6s linear; }
@keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; } }
@keyframes glow { from { text-shadow: 0 0 10px #ff69b4; } to { text-shadow: 0 0 20px #ff69b4, 0 0 30px #ff1493; } }
.hidden { display: none; }
#response { margin-top: 30px; font-size: 2em; color: #ff69b4; } </style></head><body> <div class="container"> <h1>亲爱的 [她的名字]</h1> <p>从遇见你的那一刻起，我的心就被你偷走了。<br> 你的笑容是我每天最期待的风景，<br> 你的声音是我听过最动听的旋律。<br> 我想和你一起走过每一个春夏秋冬。</p>
<div id="question"> <p>你愿意做我的女朋友吗？</p> <a href="#" class="btn" id="yes-btn">愿意</a> <a href="#" class="btn" id="no-btn">再考虑考虑</a> </div>
<div id="response" class="hidden"></div> </div>
<script> function createHeart() { const heart = document.createElement('div'); heart.classList.add('heart');
heart.innerHTML = '❤️'; heart.style.left = Math.random() * 100 + 'vw'; heart.style.fontSize = Math.random() * 30 + 10 + 'px'; heart.style.animationDuration = Math.random() * 3 + 3 + 's';
document.body.appendChild(heart);
setTimeout(() => { heart.remove(); }, 6000); }
setInterval(createHeart, 300);
document.getElementById('yes-btn').addEventListener('click', function(e) { e.preventDefault(); document.getElementById('question').classList.add('hidden'); document.getElementById('response').classList.remove('hidden'); document.getElementById('response').innerHTML = '❤️ 太好了！我爱你！ ❤️';
clearInterval(heartInterval); setInterval(createHeart, 100); });
document.getElementById('no-btn').addEventListener('click', function(e) { e.preventDefault(); this.style.position = 'absolute'; const x = Math.random() * (window.innerWidth - 100); const y = Math.random() * (window.innerHeight - 50); this.style.left = x + 'px'; this.style.top = y + 'px'; });
let heartInterval = setInterval(createHeart, 300); </script></body></html>
