首页用HTML写出绽放的烟花

用HTML写出绽放的烟花

时间: 2024-11-07 19:12:27 浏览: 9

HTML本身并不能直接显示动画效果，比如绽放的烟花，因为它主要用于标记网页结构。但是，你可以结合CSS和JavaScript（如jQuery）来模拟这样的效果。这里有一个简单的例子，使用CSS `@keyframes`和HTML元素来展示烟花动态效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .burst { position: relative; width: 50px; height: 50px; } .sparkle { position: absolute; top: 0; left: 0; border-radius: 50%; width: 4px; height: 4px; background-color: #ff0000; /* 烟花颜色 */ animation-name: firework; animation-duration: 2s; animation-timing-function: linear; } @keyframes firework { 0% { transform: scale(0); } 50% { opacity: 0.7; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(3) rotate(90deg); } } </style> </head> <body> <div class="burst"> <div class="sparkle"></div> </div> </body> </html> ``` 在这个例子中，`.sparkle`元素会从无到有逐渐放大并旋转，模拟烟花绽放的效果。当动画结束后，它的透明度降低至0，看起来就像烟花消失了一样。

阅读全文