[分享]css3放鞭炮的代码

CSS3放鞭炮的代码 CSS3可以实现很多有趣的效果，比如放鞭炮。放鞭炮的效果就像是烟花一样，非常的炫酷。下面是一段CSS3实现放鞭炮的代码： .firework { width: 0; heigh...

CSS3放鞭炮的代码 CSS3可以实现很多有趣的效果，比如放鞭炮。放鞭炮的效果就像是烟花一样，非常的炫酷。下面是一段CSS3实现放鞭炮的代码：

<pre>
.firework {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #f00;
  border-radius: 50%;
  position: absolute;
  top: 90%;
  left: 50%;
  animation: firework 2s 0s ease-out both;
}

@keyframes firework {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateY(-300%);
  }
} 

首先是一个类名为`.firework`的元素，它的宽度和高度都为0，通过设置上下边框的宽度达到了放鞭炮的形状。同时给`.firework`设置了圆角。 接下来是设置`.firework`的位置，使用了绝对定位，把它放在了页面的底部，中间位置。 接着是设置`.firework`的动画效果，使用了关键帧`@keyframes`来实现。在动画中，通过改变`opacity`和`transform`的属性值，让元素从初始状态变成了放鞭炮的状态，最后消失。 在HTML中，只需要添加一个类名为`.firework`的元素，就可以实现放鞭炮的效果了。

点击放鞭炮 function createFirework() { const firework = document.createElement('div'); firework.classList.add('firework'); document.body.appendChild(firework); firework.addEventListener('animationend', function() { document.body.removeChild(firework); }); }

``` 最后是在HTML中添加一个按钮，通过JS动态创建`.firework`元素，并添加到页面上。同时监听了`.firework`元素的动画结束事件，在元素动画结束后，把元素从页面中移除。这样就可以让用户在点击按钮的时候实现一次放鞭炮的效果了。