页面中会不断地创建烟花元素并播放爆炸动画,让烟花不断出现在随机位置。
微信表情烟花代码:
```html
#fireworks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.firework {
position: absolute;
width: 10px;
height: 10px;
background-color: #ff6551;
border-radius: 50%;
box-shadow: 0 0 10px #ff6551;
animation: explode 1s forwards;
}
@keyframes explode {
from {
opacity: 1;
}
to {
width: 100px;
height: 100px;
opacity: 0;
}
}
function createFirework() {
var firework = document.createElement("div");
firework.className = "firework";
firework.style.top = Math.random() * 100 + "%";
firework.style.left = Math.random() * 100 + "%";
document.getElementById("fireworks").appendChild(firework);
}
setInterval(createFirework, 500);
```
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开,就可以看到微信表情烟花效果了。页面中会不断地创建烟花元素并播放爆炸动画,让烟花不断出现在随机位置。