首页html烟花爱心代码

html烟花爱心代码

时间: 2024-12-24 17:10:48 浏览: 5

HTML中创建烟花爱心图案通常涉及到CSS和一些基本的HTML元素组合，尤其是SVG（矢量图形）。这里是一个简单的例子，展示如何通过SVG路径来制作烟花爱心： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart-firework { width: 200px; height: 200px; position: relative; transform-origin: bottom center; } .path { fill: none; stroke-width: 5; stroke-linecap: round; animation: firework 2s linear infinite; } @keyframes firework { 0% {transform: translateY(0); stroke-dasharray: 800;} 50% {stroke-dasharray: 400; opacity: 0.7;} 100% {transform: translateY(-400px); stroke-dasharray: 800;} } </style> </head> <body> <div class="heart-firework"> <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet"> <path class="path" d="M96.4,142.2c0,4.8-3.9,8.7-8.7,8.7s-8.7-3.9-8.7-8.7v-65.5h56.3V142.2z M48.3,142.2L48.3,79.5 96.4,79.5 L96.4,142.2z"></path> </svg> </div> </body> </html> ``` 这个代码片段中，SVG路径定义了爱心形状，并通过动画实现了烟花的效果。`@keyframes firework`规则控制了线条的移动和缩放。你可以根据需要调整样式和动画效果。

阅读全文