利用JavaScript實現(xiàn)放鞭炮動畫效果
更新時間：2023年01月11日 08:22:49 作者：我是一只魚吖
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下
前言
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲，小時候到了春節(jié)，點上一根香,把紅色的鞭炮從那一排子里解出幾個,放在石頭上,用香火點著捻子,只聽“啪"的一聲,鞭炮響了,鞭炮皮炸了一地，爽的不行；然而現(xiàn)在由于各種原因不能像小時候一樣痛快的放鞭炮了，鞭炮就是過年的靈魂，過年要是不放點煙花爆竹，總感覺少了點年味，沒意思透了。只能在網(wǎng)上來實現(xiàn)這個小小的心愿了，體驗小時候路邊放鞭炮的快樂時光。效果圖如下：
制作思路
1）首先構(gòu)建一串鞭炮
2）點炮，兔年這個任務(wù)就交給可愛的小兔吧
3）制作鞭炮爆炸效果
4）添加鞭炮音效
代碼實現(xiàn)
構(gòu)建鞭炮
首先準(zhǔn)備一條豎線，作為這串鞭炮的總捻子。
然后沿著捻子在兩邊排放鞭炮，每個鞭炮的實現(xiàn)方式如下：
<div class="bp-item bp-right bg-delay1 bg-ani-name1" style="left: 127px;top:59.77230769230769px;">
<div class="bp-wrap">
<div class="bp" style="transform: scale(0.8) rotate(-19deg);">
<div class="top">
<i></i>
</div>
<div class="side up">
<i></i>
</div>
<div class="side down1">
<i></i>
</div>
<div class="side down2">
<i></i>
</div>
<div class="bottom foot">
</div>
<div class="text">
<div class="out">
<div class="mid">
<div class="in">
</div>
</div>
</div>
<span>新</span>
</div>
</div>
<div class="bang bang2">
</div>
</div>
</div>安排小兔上場點火
兔年點炮動作就交給小兔吧！在上面加個按鈕用來觸發(fā)點炮動作。
$(".dear-joy").bind("click", function() {
$(this).removeClass("jump").addClass("dian");
setTimeout(function() {
f.trigger("bang") //觸發(fā)鞭炮爆炸效果
}, 500);
$(".dear-joy2").addClass("fadeIn")
});
//鞭炮爆炸
f.bind("bang", function() {
var w = $(this).find(".bp-item");
w.each(function(y, z) {
setTimeout(function() {
$(z).addClass("on hold-forwards bp-fly")
}, (w.length - y + 4) * 150)
});
plays();//啟聲音
setTimeout(function() {
_audioDom.pause() //音頻暫停
}, 6000);
});爆炸效果
.hold-forwards {
-webkit-animation-fill-mode: forwards !important;
animation-fill-mode: forwards !important;
}
.on .bp {
-webkit-animation: easeOut .2s ease-in;
animation: easeOut .2s ease-in;
}添加音頻
沒有聲音的鞭炮是沒有靈魂的。
<audio src="http://downsc.chinaz.net/Files/DownLoad/sound/huang/cd9/mp3/222.mp3" id="audio_box"></audio>
到此這篇關(guān)于利用JavaScript實現(xiàn)放鞭炮動畫效果的文章就介紹到這了,更多相關(guān)JavaScript放鞭炮動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrap table合并行數(shù)據(jù)并居中對齊效果
這篇文章主要為大家詳細(xì)介紹了bootstrap table合并行數(shù)據(jù)并居中對齊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
JS獲取當(dāng)前網(wǎng)址、主機(jī)地址項目根路徑
本文為大家提供JS如何獲取當(dāng)前網(wǎng)址、主機(jī)地址之后的目錄及項目根路徑的方法，喜歡的朋友可以收藏下2013-11-11
firefox中JS讀取XML文件...2006-12-12
這篇文章主要介紹了使用JS來動態(tài)操作css的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript對JSON數(shù)組簡單排序操作示例
這篇文章主要介紹了JavaScript對JSON數(shù)組簡單排序操作,結(jié)合實例形式分析了javascript使用sort()方法針對json數(shù)組元素排序的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01
微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于如何通過一文讀懂微信小程序頁面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2022-11-11
原生JS實現(xiàn)表單checkbook獲取已選擇的值
本文為大家介紹下采用原生JS實現(xiàn)從一個表單checkbox獲取到已選中的數(shù)據(jù)值，具體的實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
寫一個函數(shù)處理大數(shù)據(jù)的相加問題，所謂的大數(shù)據(jù)是指超出了整型，長整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實現(xiàn)語言不限。2011-08-08
這篇文章為大家詳細(xì)主要介紹了JS實現(xiàn)簡單貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
js實現(xiàn)1,2,3,5數(shù)字按照概率生成
這篇文章主要介紹了js實現(xiàn)1,2,3,5數(shù)字按照概率生成,需要的朋友可以參考下2017-09-09