棒呆！如何用css3实现烟花绽开效果

闲聊

就在上周六，我去听了一场分享会，分享会大概分享了几个大主题：

• 如何及时在线上debug到错误信息，而且处理以及记录（window.onerror）
• web动画实践以及技巧（mvp非他莫属，这也是今天我要和你们share的主题）
• 前端自动化测试（wire mock的使用，讲真我还真没听懂多少。。）

短分享了几个小主题（15分钟内）

• 数据基本类型以及引用类型
• 矩阵算法（transform的原理等，好吧，这个我也没听懂多少。。我认可我菜）
• jsBinding（oc与js的交互技术，额，好吧，oc我不懂，因此没怎么看懂）

例子

demo地址： 烟花

开始

一说到要作烟花绽开的这种动画，你们一开始想到的应该是用粒子动画的方式来实现，这样成本会比较高。并且网上一搜也是一大把这种demo，下面咱们就试试用简单的几句css3来实现这个效果吧！

html

<div class="bg">
        <div class="fire"></div>
        <div class="fire2"></div>
    </div>
复制代码

css

body {
    background: #000;
  }
  .fire, .fire2 {
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528711658929&di=b1915568e41809ec716dd5fb197059bf&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20171215%2Ftooopen_sy_230419854445.jpg') no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    background-clip: content-box;
    border-radius: 100%;
  }

  .fire {
    animation: firing 1.5s ease infinte;
    -webkit-animation: firing 1.5s ease infinite;
  }

  .fire2 {
    animation: firing2 1.5s ease infinte;
    -webkit-animation: firing2 1.5s ease infinite;
  }

  @keyframes firing {
    0%{ padding: 80px; transform: scale(0.5) translateY(0); opacity:1;}
    75% { padding:0; transform: scale(1) translateY(0);}
    100%{ opacity:0; transform:scale(1) translateY(100px);}
  }

  @-webkit-keyframes firing {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translateY(0); opacity:1;}
    75%{ padding:0;-webkit-transform: scale(1) translateY(0);}
    100%{ opacity:0;-webkit-transform:scale(1) translateY(100px);}
  }

  @keyframes firing2 {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
    100%{ opacity: 0; -webkit-transform: scale(1); }
  }

  @-webkit-keyframes firing2 {
    0%{ padding: 80px; -webkit-transform: scale(0.5) translate(0); opacity:1; }
    100%{ opacity: 0; -webkit-transform:scale(1); }
  }

复制代码

结语

用了两种效果，一种是y轴有偏移，另外一种是y轴没有偏移。 第一种方法多了一个烟花绽开后掉落的过程，是原大神的分享，第二种是最简单的实现方式，也算过渡天然。