超酷炫！用HTML打造科幻风生日快乐祝福网页

# 科幻风格生日快乐网页下面是一个酷炫、高级、科幻风格的生日快乐HTML网页代码，包含粒子动画、3D文字效果和星空 ```html <!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; overflow: hidden; background: #000; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } #particles-js { position: absolute; width: 100%; height: 100%; z-index: 1; } .birthday-container { position: relative; z-index: 2; text-align: center; padding: 2rem; border-radius: 10px; max-width: 800px; } h1 { font-size: 4rem; margin: 0; text-transform: uppercase; letter-spacing: 3px; background: linear-gradient(90deg, #00d2ff, #3a7bd5, #00d2ff); background-size: 200% auto; color: #000; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient 3s linear infinite; text-shadow: 0 0 10px rgba(58, 123, 213, 0.5); } p { font-size: 1.5rem; margin: 1.5rem 0; color: #00d2ff; } .neon { animation: flicker 1.5s infinite alternate; } @keyframes gradient { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; } 20%, 24%, 55% { text-shadow: none; } } .glow { font-size: 2rem; color: #fff; text-align: center; animation: glow 1s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; } to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6; } } .matrix-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.3; } </style> </head> <body> <div id="particles-js"></div> <canvas class="matrix-rain" id="matrix"></canvas> <div class="birthday-container"> <h1 class="neon">生日快乐!</h1> <p>愿你的每一天都如星辰般闪耀</p> <div class="glow">来自未来的祝福</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": "#00d2ff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#00d2ff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); // 矩阵雨效果 const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const nums = '0*'; const alphabet = katakana + latin + nums; const fontSize = 16; const columns = canvas.width / fontSize; const rainDrops = []; for (let x = 0; x < columns; x++) { rainDrops[x] = 1; } const draw = () => { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize); if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) { rainDrops[i] = 0; } rainDrops[i]++; } }; setInterval(draw, 30); // 窗口大小调整时重设canvas尺寸 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> ``` ## 代码特点说明 1. 粒子动画：使用particles.js创建交互式粒子网络，鼠标悬停和点击会有不同效果 2. 矩阵数字雨：模拟《黑客帝国》风格的绿色数字雨 3. 霓虹文字效果：生日快乐文字有渐变色彩和霓虹灯闪烁效果 4. 科幻色彩：以蓝色、青色为主色调，营造未来科技感 5. 响应式设计：适应不同屏幕尺寸 ## 使用说明 1. 将代码保存为HTML文件 2. 在浏览器中打开即可看到效果 3. 可以修改文字内容、颜色和动画参数来自定义效果 ## 注意事项 1. 代码依赖外部particles.js库，需要联网加载 2. 矩阵雨效果使用Canvas实现，对性能有一定要求 3. 霓虹灯效果在某些旧浏览器上可能不支持 ######[AI写代码神器 | 2235点数解答 | 2025-06-23 15:03:49]

服务商

更多选项

快捷项

自定义