利用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)文章
js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
本文為大家講解下js異步操作時回調(diào)函數(shù)如何控制執(zhí)行順序，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了ES6 Symbol在對象中的作用,結(jié)合實例形式分析了ES6 Symbol在對象中聲明、使用方法與相關(guān)注意事項,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS實現(xiàn)在頁面隨時自定義背景顏色的方法,實例分析了javascript操作css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
很多同學(xué)知道怎么用這種匿名函數(shù)，卻或許并不明白為什么這樣寫就能夠調(diào)用匿名函數(shù)。也許知道后面的圓括號是執(zhí)行前面的函數(shù)，而并不清楚前面的圓括號具有何種含義！本文將帶你了解匿名函數(shù)的代碼模式原理。2010-03-03
我們可能很少在編程中用位運算,如果沒深入學(xué)習(xí),可能也很難理解,下面這篇文章主要給大家介紹了關(guān)于js位運算在實際中使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)硪黄狣OM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
js操作div仿title提示信息效果,增強型title信息提示，效果不錯。2010-06-06
這篇文章主要介紹了js顯示文本框提示文字的方法,涉及javascript鼠標(biāo)事件及樣式操作的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了Moment.js實現(xiàn)多個同時倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08