用html实现最美烟花特效
时间: 2023-07-12 10:21:35 浏览: 48
以下是一个简单的 HTML 实现最美烟花特效的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>最美烟花特效</title>
<style>
body {
background: black;
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
animation: explode 1s linear forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0.5;
}
100% {
transform: scale(3);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createFirework(x, y) {
var firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = x + 'px';
firework.style.top = y + 'px';
document.body.appendChild(firework);
setTimeout(function() {
firework.parentNode.removeChild(firework);
}, 1000);
}
document.addEventListener('click', function(e) {
createFirework(e.clientX, e.clientY);
});
</script>
</body>
</html>
```
当用户在页面上点击鼠标时,`createFirework` 函数会在鼠标点击位置创建一个代表烟花的 `div` 元素。该元素会根据 `explode` 动画效果进行缩放和透明度变化,最终在 1 秒后消失。