首页生成html烟花特效

生成html烟花特效

时间: 2024-01-17 09:04:16 浏览: 122

以下是使用HTML和jQuery实现烟花特效的示例代码： ```html <!DOCTYPE html> <html> <head> <title>烟花特效</title> <style> #fireworks-container { position: relative; width: 500px; height: 500px; background-color: black; } .firework { position: absolute; width: 10px; height: 10px; background-color: red; border-radius: 50%; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { function createFirework() { var firework = $('<div class="firework"></div>'); var container = $('#fireworks-container'); var containerWidth = container.width(); var containerHeight = container.height(); var x = Math.random() * containerWidth; var y = Math.random() * containerHeight; firework.css({ left: x, top: y }); container.append(firework); firework.animate({ width: '100px', height: '100px', opacity: 0 }, 2000, function() { firework.remove(); }); } setInterval(createFirework, 1000); }); </script> </head> <body> <div id="fireworks-container"></div> </body> </html> ``` 这段代码会在一个指定的div容器中生成逼真的烟花特效。每隔1秒钟，会在随机位置生成一个小圆点，然后通过动画将其扩大并逐渐消失。

阅读全文