首页父亲节烟花代码html

父亲节烟花代码html

时间: 2024-06-17 22:01:40 浏览: 164

父亲节烟花效果通常可以通过CSS动画和JavaScript来实现，并不是直接在HTML中编写代码来创建真实的烟花效果，因为HTML主要用于结构内容，CSS用于样式，JavaScript则用于动态交互。这里提供一个简单的HTML、CSS和JavaScript结合的例子，展示如何模拟烟花： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Happy Father's Day Fireworks</title> <style> #fireworks { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sparkle { width: 5px; height: 5px; border-radius: 50%; background-color: #ff0; /* 可自定义烟花颜色 */ animation: sparkle 2s linear infinite; } @keyframes sparkle { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); opacity: 0; } } </style> </head> <body> <div id="fireworks">  <div class="sparkle" style="top: calc(100vh * random()); left: calc(100vw * random());"></div>   </div> <script> function createFireworks(num) { for (let i = 0; i < num; i++) { document.getElementById('fireworks').innerHTML += `<div class="sparkle" style="top: calc(100vh * random()); left: calc(100vw * random());"></div>`; } } // 在页面加载后或特定时间触发烟花生成 window.onload || setTimeout(() => createFireworks(50), 2000); // 创建50个火花，2秒后显示 </script> </body> </html> ``` 在这个例子中，HTML部分设置了烟花容器，CSS定义了烟花的基本样式和动画效果。JavaScript负责在页面加载后或指定时刻动态创建并插入多个火花。

阅读全文