首页用html写一个放烟花代码，烟花颜色随机大小随机

用html写一个放烟花代码，烟花颜色随机大小随机

时间: 2024-09-07 14:06:57 浏览: 56

HTML本身并不直接支持动画效果，比如烟花绽放。但是我们可以结合CSS和JavaScript来模拟这种动态效果。下面是一个简单的示例，它创建了一个div元素，并通过JavaScript控制其宽度、高度和背景颜色的变化，营造出类似烟花的效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .firework { position: relative; display: inline-block; width: 50px; /* 烟花初始宽度 */ height: 50px; /* 烟花初始高度 */ animation: fireworks 3s ease-in-out infinite; /* 动画持续时间、缓动效果和无限循环 */ } @keyframes fireworks { 0% { width: 50px; height: 50px; background-color: #F00; } /* 开始时红色 */ 50% { width: 70px; height: 100px; background-color: #00F; } /* 中间阶段随机颜色 */ 100% { width: 50px; height: 50px; background-color: transparent; } /* 结束透明 */ } </style> </head> <body> <div class="firework"></div> <script> // 随机颜色生成函数 function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // 每隔一段时间改变烟花的颜色 setInterval(() => { document.querySelector('.firework').style.backgroundColor = getRandomColor(); }, 2000); // 每隔2秒更换一次颜色 </script> </body> </html> ``` 这个例子中，烟花会从红色开始，然后变宽、变高并变为随机颜色，最后恢复到原始尺寸。每两秒钟颜色会发生变化。

阅读全文