# 巨型多层蛋糕粒子效果 (HTML + CSS + JavaScript) 以下是一个使用纯HTML、CSS和JavaScript创建的多层蛋糕粒子效果，包含动态火焰和360度旋转功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋转蛋糕粒子效果</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #111; overflow: hidden; perspective: 1000px; } .cake-container { position: relative; width: 300px; height: 400px; transform-style: preserve-3d; animation: rotate 20s infinite linear; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } .cake-layer { position: absolute; border-radius: 50%; transform-origin: center bottom; } .layer1 { width: 300px; height: 100px; bottom: 0; background: linear-gradient(to bottom, #f9c5d1, #f2789f); box-shadow: 0 10px 20px rgba(242, 120, 159, 0.5); } .layer2 { width: 250px; height: 100px; bottom: 100px; background: linear-gradient(to bottom, #f8b195, #f67280); box-shadow: 0 10px 20px rgba(246, 114, 128, 0.5); } .layer3 { width: 200px; height: 100px; bottom: 200px; background: linear-gradient(to bottom, #c06c84, #6c5b7b); box-shadow: 0 10px 20px rgba(108, 91, 123, 0.5); } .candle { position: absolute; width: 10px; height: 60px; background: white; left: 50%; transform: translateX(-50%); top: -60px; z-index: 10; } .flame { position: absolute; width: 20px; height: 40px; background: #ff7800; border-radius: 50% 50% 20% 20%; left: 50%; transform: translateX(-50%); top: -100px; filter: blur(5px); animation: flicker 0.5s infinite alternate; box-shadow: 0 0 20px #ff7800, 0 0 40px #ff5100, 0 0 60px #ff0000; z-index: 11; } @keyframes flicker { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1, 0.9); } } .particle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.8); pointer-events: none; z-index: 100; } </style> </head> <body> <div class="cake-container"> <div class="cake-layer layer1"></div> <div class="cake-layer layer2"></div> <div class="cake-layer layer3"></div> <div class="candle"></div> <div class="flame"></div> </div> <script> // 创建蛋糕粒子效果 function createParticles() { const container = document.querySelector('.cake-container'); const layers = document.querySelectorAll('.cake-layer'); layers.forEach(layer => { const layerRect = layer.getBoundingClientRect(); const centerX = layerRect.left + layerRect.width / 2; const centerY = layerRect.top + layerRect.height / 2; const radius = layerRect.width / 2; for (let i = 0; i < 50; i++) { const particle = document.createElement('div'); particle.className = 'particle'; // 随机位置在蛋糕层上 const angle = Math.random() * Math.PI * 2; const distance = Math.random() * radius * 0.8; const x = centerX + Math.cos(angle) * distance; const y = centerY + Math.sin(angle) * distance; // 随机大小和透明度 const size = Math.random() * 5 + 2; const opacity = Math.random() * 0.5 + 0.3; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.opacity = opacity; // 添加动画 particle.style.animation = `float ${Math.random() * 5 + 3}s infinite ease-in-out`; document.body.appendChild(particle); // 粒子浮动动画 const keyframes = ` @keyframes float { 0% { transform: translate(0, 0); } 50% { transform: translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px); } 100% { transform: translate(0, 0); } } `; const style = document.createElement('style'); style.innerHTML = keyframes; document.head.appendChild(style); } }); } // 页面加载后创建粒子 window.addEventListener('load', () => { createParticles(); // 动态更新火焰位置 const flame = document.querySelector('.flame'); setInterval(() => { flame.style.left = `${50 + Math.random() * 2 - 1}%`; flame.style.height = `${30 + Math.random() * 20}px`; }, 100); }); </script> </body> </html> ``` ## 代码说明 1. 蛋糕结构： - 使用三个div元素创建三层蛋糕，每层有不同的颜色和大小 - 通过CSS渐变和阴影增强视觉效果 2. 旋转效果： - 使用CSS的`transform-style: preserve-3d`保持3D效果 - 通过`rotateY`动画实现360度水平旋转 3. 火焰效果： - 使用CSS动画实现火焰闪烁效果 - 通过`box-shadow`和`filter: blur()`创建发光效果 - JavaScript随机改变火焰高度和位置模拟真实火焰 4. 粒子效果： - 使用JavaScript动态创建多个粒子元素 - 每个粒子有随机大小、位置和浮动动画 - 粒子分布在蛋糕表面增强视觉效果 ## 注意事项 1. 性能考虑：大量粒子可能影响性能，可根据设备能力调整粒子数量 2. 浏览器兼容性：某些CSS 3D特性在旧浏览器中可能不支持 3. 响应式设计：当前尺寸固定，如需响应式需要添加媒体查询调整尺寸 [2025-07-05 22:19:15 | AI写代码神器 | 1674点数解答]