爱心烟花代码html
时间: 2024-08-18 10:00:26 浏览: 236
基于HTML5特效包含流星雨特效、爱心特效、炫酷特效、烟花特效
在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>
```
这个代码片段创建了一个红色爱心形状,当它"爆炸"时,两边的小圆点会向上移动并旋转,给人一种烟花的效果。你可以根据需要调整颜色、大小、动画速度等。
阅读全文