棒呆!如何用css3實現煙花綻放效果

小瑪麗在隔壁發表於2018-06-12

閒聊

就在上週六,我去聽了一場分享會,分享會大概分享了幾個大主題:

  • 如何及時線上上debug到錯誤資訊,並且處理以及記錄(window.onerror)
  • web動畫實踐以及技巧(mvp非他莫屬,這也是今天我要和大家share的主題)
  • 前端自動化測試(wire mock的使用,講真我還真沒聽懂多少。。)

短分享了幾個小主題(15分鐘內)

  • 資料基本型別以及引用型別
  • 矩陣演算法(transform的原理等,好吧,這個我也沒聽懂多少。。我承認我菜)
  • jsBinding(oc與js的互動技術,額,好吧,oc我不懂,所以沒怎麼看懂)

例子

demo地址: 煙花

img

開始

一說到要做煙花綻放的這種動畫,大家一開始想到的應該是用粒子動畫的方式來實現,這樣成本會比較高。而且網上一搜也是一大把這種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軸沒有偏移。 第一種方法多了一個煙花綻放後掉落的過程,是原大神的分享,第二種是最簡單的實現方式,也算過渡自然。

相關文章