閑聊

就在上周六，我去聽了一場分享會，分享會大概分享了幾個大主題：

• 如何及時在線上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軸沒有偏移。 第一種方法多了一個煙花綻放后掉落的過程，是原大神的分享，第二種是最簡單的實現方式，也算過渡自然。

總結

以上是生活随笔為你收集整理的棒呆！如何用css3实现烟花绽放效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。