html爱心烟花代码
时间: 2023-10-10 12:03:30 浏览: 385
爱心烟花特效html代码
HTML爱心烟花代码主要是利用CSS3和JavaScript来实现的。下面是一段简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>爱心烟花代码</title>
<style>
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div id="heart"></div>
<script>
function createParticles() {
const heart = document.getElementById('heart');
for (let i = 0; i < 30; i++) {
const particle = document.createElement('span');
particle.classList.add('particle');
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDuration = Math.random() * 3 + 2 + 's';
heart.appendChild(particle);
}
}
createParticles();
</script>
</body>
</html>
```
上述代码中,首先定义了一个id为"heart"的div元素,用于表示爱心形状。通过CSS3中的transform属性和animation动画,使得爱心呈现出跳动的效果。
接着,在JavaScript部分,定义了一个名为createParticles的函数来创建烟花效果的粒子。通过循环创建多个span元素,设置随机的left值和动画时长,然后将每个粒子追加到爱心div中。
通过以上代码,可以实现一个简单的HTML爱心烟花效果,当页面加载时,爱心形状会不断跳动,并且在爱心周围发出烟花粒子的动画效果。
阅读全文