![]()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>💌 情人节快乐 · 予你满心欢喜</title> <!-- 引入字体图标 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; overflow-x: hidden; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fecfef 100%); background-attachment: fixed; position: relative; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='24' font-size='24'>❤️</text></svg>"), auto; } /* 粒子画布 */ #particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* 主容器 3D效果 */ .container { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; perspective: 1000px; } /* 3D旋转玫瑰盒子 */ .rose-box { width: 220px; height: 220px; position: relative; transform-style: preserve-3d; animation: rotate3D 12s linear infinite; margin: 30px 0; } @keyframes rotate3D { 0% { transform: rotateY(0deg) rotateX(15deg); } 100% { transform: rotateY(360deg) rotateX(15deg); } } .rose-box .face { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, #ff5e7d 30%, #ff2e63 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60px; box-shadow: 0 0 30px rgba(255, 46, 99, 0.6); } .rose-box .face:nth-child(1) { transform: rotateY(0deg) translateZ(110px); } .rose-box .face:nth-child(2) { transform: rotateY(72deg) translateZ(110px); } .rose-box .face:nth-child(3) { transform: rotateY(144deg) translateZ(110px); } .rose-box .face:nth-child(4) { transform: rotateY(216deg) translateZ(110px); } .rose-box .face:nth-child(5) { transform: rotateY(288deg) translateZ(110px); } /* 标题霓虹效果 */ .title { font-size: clamp(2rem, 8vw, 4.5rem); background: linear-gradient(90deg, #ff2e63, #ff9a9e, #ffd1d7, #ff2e63); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: titleShine 3s linear infinite; text-shadow: 0 0 20px rgba(255, 46, 99, 0.4); margin-bottom: 10px; text-align: center; } @keyframes titleShine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* 打字机情话 */ .typewriter { font-size: clamp(1rem, 4vw, 1.6rem); color: #c2185b; min-height: 60px; margin: 20px 0; text-align: center; max-width: 90%; line-height: 1.6; position: relative; } .typewriter::after { content: "|"; animation: blink 0.7s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* 暖心文案卡片 */ .card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; max-width: 600px; width: 90%; box-shadow: 0 15px 35px rgba(255, 46, 99, 0.3); transition: all 0.4s ease; border: 2px solid transparent; background-clip: padding-box; } .card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 50px rgba(255, 46, 99, 0.4); border-color: #ff9a9e; } .card-text { font-size: clamp(0.95rem, 3vw, 1.2rem); color: #666; text-align: center; line-height: 1.8; min-height: 100px; } /* 互动按钮 */ .btn-group { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; justify-content: center; } .love-btn { padding: 12px 30px; border: none; border-radius: 50px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(255, 46, 99, 0.3); position: relative; overflow: hidden; } .btn-pink { background: linear-gradient(45deg, #ff2e63, #ff5e7d); color: white; } .btn-white { background: white; color: #ff2e63; border: 2px solid #ff2e63; } .love-btn:hover { transform: scale(1.1); box-shadow: 0 12px 25px rgba(255, 46, 99, 0.5); } .love-btn:active { transform: scale(0.95); } /* 漂浮爱心 */ .float-heart { position: absolute; color: #ff2e63; font-size: 20px; animation: floatUp 3s ease-out forwards; z-index: 5; pointer-events: none; } @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(0.8); } 100% { opacity: 0; transform: translateY(-300px) scale(1.2) rotate(360deg); } } /* 底部署名 */ .footer { margin-top: 40px; color: #c2185b; font-size: 0.9rem; opacity: 0.8; } </style> </head> <body> <!-- 粒子背景 --> <canvas id="particleCanvas"></canvas> <div class="container"> <h1 class="title">💖 情人节快乐 💖</h1> <!-- 3D旋转玫瑰 --> <div class="rose-box"> <div class="face">🌹</div> <div class="face">💞</div> <div class="face">💌</div> <div class="face">💓</div> <div class="face">💝</div> </div> <!-- 打字机情话 --> <div class="typewriter" id="typewriter"></div> <!-- 暖心卡片 --> <div class="card"> <p class="card-text" id="cardText">世界上最美好的事，莫过于：我喜欢你的同时，你也刚好喜欢我。</p> </div> <!-- 互动按钮 --> <div class="btn-group"> <button class="love-btn btn-pink" onclick="sendLove()"> <i class="fa-solid fa-heart"></i> 戳我送爱心 </button> <button class="love-btn btn-white" onclick="changeText()"> <i class="fa-solid fa-comment"></i> 换一句情话 </button> </div> <div class="footer">✨ 予你偏爱 · 赠你深情 ✨</div> </div> <script> // 1. 爱心粒子背景 const canvas = document.getElementById('particleCanvas'); const ctx = canvas.getContext('2d'); let w = canvas.width = window.innerWidth; let h = canvas.height = window.innerHeight; let particles = []; class Particle { constructor() { this.x = Math.random() * w; this.y = Math.random() * h; this.size = Math.random() * 3 + 1; this.speedX = Math.random() * 0.5 - 0.25; this.speedY = Math.random() * 0.5 - 0.25; this.color = Math.random() > 0.5 ? '#ff2e63' : '#ff9a9e'; this.opacity = Math.random() * 0.6 + 0.2; } update() { this.x += this.speedX; this.y += this.speedY; if (this.x < 0 || this.x > w) this.speedX *= -1; if (this.y < 0 || this.y > h) this.speedY *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.globalAlpha = this.opacity; ctx.fill(); ctx.globalAlpha = 1; } } function initParticles() { particles = []; for (let i = 0; i < 100; i++) particles.push(new Particle()); } function animateParticles() { ctx.clearRect(0, 0, w, h); particles.forEach(p => { p.update(); p.draw(); }); requestAnimationFrame(animateParticles); } // 2. 打字机效果 const loveTexts = [ "遇见你，是我此生最大的幸运。", "朝暮不依长相思，白首不离长相守。", "世界再大，我的眼里只有你。", "愿有岁月可回首，且以深情共白头。", "不用见日月，你就是星辰。" ]; let textIndex = 0, charIndex = 0, currentText = ''; const typewriterEl = document.getElementById('typewriter'); function typeWriter() { if (charIndex < loveTexts[textIndex].length) { currentText += loveTexts[textIndex].charAt(charIndex); typewriterEl.innerText = currentText; charIndex++; setTimeout(typeWriter, 120); } else { setTimeout(() => { currentText = ''; charIndex = 0; textIndex = (textIndex + 1) % loveTexts.length; typeWriter(); }, 2000); } } // 3. 切换卡片文案 const cardTexts = [ "世界上最美好的事，莫过于：我喜欢你的同时，你也刚好喜欢我。", "我绕过江山错落，才发现你才是人间烟火。", "钟情于你，忠诚于你，衷心于你，终止于你。", "往后余生，风雪是你，平淡是你，清贫是你，荣华是你。", "你是年少的欢喜，也是余生的甜蜜。" ]; let cardIndex = 0; function changeText() { cardIndex = (cardIndex + 1) % cardTexts.length; document.getElementById('cardText').innerText = cardTexts[cardIndex]; createHearts(); } // 4. 点击触发爱心漂浮 function sendLove() { createHearts(8); // 震动效果 document.body.style.animation = "shake 0.3s"; setTimeout(() => document.body.style.animation = "", 300); } function createHearts(num = 4) { for (let i = 0; i < num; i++) { const heart = document.createElement('div'); heart.className = "float-heart"; heart.innerHTML = "❤️"; heart.style.left = Math.random() * 80 + 10 + "%"; heart.style.top = Math.random() * 60 + 20 + "%"; heart.style.fontSize = Math.random() * 15 + 15 + "px"; document.body.appendChild(heart); setTimeout(() => heart.remove(), 3000); } } // 窗口 resize 适配 window.addEventListener('resize', () => { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; initParticles(); }); // 页面加载启动 window.onload = () => { initParticles(); animateParticles(); typeWriter(); createHearts(6); }; // 自定义震动动画 const style = document.createElement('style'); style.innerHTML = ` @keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} } `; document.head.appendChild(style); </script> </body> </html>
