首页爱心烟花代码html

爱心烟花代码html

时间: 2024-08-18 10:00:26 浏览: 182

在HTML中制作爱心烟花效果通常需要结合CSS样式和JavaScript动画。下面是一个简单的例子，展示如何使用SVG（矢量图形）和CSS动画来创建一个动态的心形烟花： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> @keyframes firework { 0% { transform: translateY(0); fill: #fff; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.5; } 100% { transform: translateY(-50px) rotate(360deg); opacity: 0; } } .heart-firework { width: 50px; height: 50px; position: relative; animation: firework 3s ease-in-out infinite; } .heart-firework::before, .heart-firework::after { content: ''; position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); border-radius: 50%; width: 8px; height: 8px; background-color: red; transition: all 0.3s; } .heart-firework::before { transform: translateX(-5px) translateY(-5px); } .heart-firework::after { transform: translateX(5px) translateY(-5px); } </style> </head> <body> <div class="heart-firework"></div> </body> </html> ``` 这个代码片段创建了一个红色爱心形状，当它"爆炸"时，两边的小圆点会向上移动并旋转，给人一种烟花的效果。你可以根据需要调整颜色、大小、动画速度等。

阅读全文