我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

过年少不了烟花，小时候除夕那晚烟花声可以响一整晚，当时觉得吵，现在是无比怀念。今天做个简单的兔子烟花送给大家，最终效果如下：

实现

想要实现烟花这个效果，我们可以分成两步： 1.上天过程：烟花从飞到天上的过程； 2.爆炸过程：烟花绽放出烟花兔子图案的过程； 这两个步骤主要运用到了css中animation与transform属性。

上天

首先我们需要创建出烟花最初的状态——烟花块，运用定位属性将烟花块放到底部。上天过程运用动画，改变烟花块的bottom属性，再利用transform的scale实现烟花块‘消失’效果。

    <div class="wrapper">
    </div>
    <div class="fire"></div>

     body {
        background: black;
      }
      .wrapper {
        width: 100%;
        margin: 0 auto;
      }
    .fire {
        width: 5px;
        height: 10px;
        background: #ee0a0a;
        position: absolute;
        left: 50%;
        bottom: 10%;
        animation: fireFrames 2s ease-out infinite;
      }
        @keyframes fireFrames {
        0% {
          bottom: 10%;
        }
        100% {
          bottom: 50%;
          transform: scale(0);
        }
      }

爆炸

当烟火块‘消失’的时候，烟火跟兔子就得出现啦，这一步我们用图片+缩放就能方便实现，用了一种‘偷懒’的方式实现了爆炸。找到图片，利用动画，让它从scale(0)变到scale(2)实现爆炸放大效果；设置opacity属性再让烟花‘消失’，为了看起来更加真实一点我们在爆炸动画设置delay延迟属性。

    <div class="wrapper">
      <img class="work bomb" src="./images/fire.png" alt />
      <img class="work rabbit" src="./images/rabbit.png" alt />
    </div>

     .work {
        position: absolute;
        left: 48%;
        top: 50%;
      }
    .bomb{
        transform: scale(0);
        animation: workFrames 2s 2s infinite;
      }
      .rabbit{
        opacity: 0.5;
        animation: rabbitFrames 2s 1s infinite;
      }
      @keyframes bombFrames {
        0% {
          transform: scale(0);
        }
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }
      @keyframes rabbitFrames {
        0% {
          opacity: 0.5;
        }
        100% {
          opacity: 0;
        }
      }  

将动画次数属性设置为infinite（无限），烟花就能一直爆炸，整个烟花效果也就出来啦。

总结

以上就是兔子烟花的实现过程，主要运用了css动画属性，各种样式根据自己喜欢调整即可。爆竹声声辞旧岁，烟花朵朵迎新春。