超炫！飘花与3D粒子爱心HTML特效代码及开发注意要点

```html <!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> body { margin: 0; overflow: hidden; background: linear-gradient(135deg, #ffcce6, #ffb3d9); font-family: 'Arial', sans-serif; } #particles-js { position: absolute; width: 100%; height: 100%; z-index: 1; } .container { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; height: 100vh; } .heart-shape { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 400px; height: 400px; } .card { width: 60px; height: 80px; background: rgba(255, 255, 255, 0.9); border-radius: 12px; box-shadow: 0 4px 15px rgba(255, 182, 193, 0.6); display: flex; justify-content: center; align-items: center; margin: 5px; transition: all 1.5s ease; position: absolute; font-size: 12px; color: #ff69b4; text-align: center; padding: 5px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 182, 193, 0.3); } .fullscreen-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; color: #ff1493; text-shadow: 2px 2px 8px rgba(255, 105, 180, 0.5); opacity: 0; transition: opacity 2s ease; z-index: 3; text-align: center; } </style> </head> <body> <div id="particles-js"></div> <div class="container"> <div class="heart-shape" id="heartContainer"></div> <div class="fullscreen-message" id="fullscreenMessage">愿你每一天都充满爱与幸福！</div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> // 初始化粒子 particlesJS('particles-js', { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: "#ffb6c1" }, shape: { type: "circle" }, opacity: { value: 0.5, random: true }, size: { value: 3, random: true }, line_linked: { enable: false }, move: { enable: true, speed: 2, direction: "none", random: true } } }); // 生成爱心形状的卡片坐标 function generateHeartPoints(count) { const points = []; for (let i = 0; i < count; i++) { const t = i / count * 2 * Math.PI; const x = 16 * Math.pow(Math.sin(t), 3); const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t); points.push({ x: x * 10, y: -y * 10 }); } return points; } // 创建卡片 const heartContainer = document.getElementById('heartContainer'); const cardMessages = ["爱", "幸福", "快乐", "平安", "健康", "好运", "美丽", "梦想"]; const heartPoints = generateHeartPoints(30); heartPoints.forEach((point, index) => { const card = document.createElement('div'); card.className = 'card'; card.textContent = cardMessages[index % cardMessages.length]; card.style.left = `calc(50% + ${point.x}px)`; card.style.top = `calc(50% + ${point.y}px)`; heartContainer.appendChild(card); }); // 动画序列 setTimeout(() => { // 卡片散开 const cards = document.querySelectorAll('.card'); cards.forEach(card => { const randomX = (Math.random() - 0.5) * window.innerWidth; const randomY = (Math.random() - 0.5) * window.innerHeight; card.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`; card.style.opacity = '0'; }); // 显示全屏祝福文字 setTimeout(() => { document.getElementById('fullscreenMessage').style.opacity = '1'; }, 1500); }, 3000); </script> </body> </html> ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 粒子系统参数调整需谨慎，数值过高可能导致性能下降 2. CSS动画的兼容性需要测试，特别是transform属性在老版本浏览器中的表现 3. 动态创建元素时要注意内存管理，避免内存泄漏 ######[AI写代码神器 | 1269点数解答 | 2025-11-08 02:21:36]

服务商

更多选项

快捷项

自定义