利用JavaScript實(shí)現(xiàn)放鞭炮動(dòng)畫效果

更新時(shí)間：2023年01月11日 08:22:49 作者：我是一只魚吖

談及過(guò)年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的放鞭炮動(dòng)畫效果，感興趣的小伙伴可以了解一下

前言

談及過(guò)年，最先讓人想到的就是，噼里啪啦的鞭炮聲，小時(shí)候到了春節(jié)，點(diǎn)上一根香,把紅色的鞭炮從那一排子里解出幾個(gè),放在石頭上,用香火點(diǎn)著捻子,只聽(tīng)“啪"的一聲,鞭炮響了,鞭炮皮炸了一地，爽的不行；然而現(xiàn)在由于各種原因不能像小時(shí)候一樣痛快的放鞭炮了，鞭炮就是過(guò)年的靈魂，過(guò)年要是不放點(diǎn)煙花爆竹，總感覺(jué)少了點(diǎn)年味，沒(méi)意思透了。只能在網(wǎng)上來(lái)實(shí)現(xiàn)這個(gè)小小的心愿了，體驗(yàn)小時(shí)候路邊放鞭炮的快樂(lè)時(shí)光。效果圖如下：

制作思路

1）首先構(gòu)建一串鞭炮

2）點(diǎn)炮，兔年這個(gè)任務(wù)就交給可愛(ài)的小兔吧

3）制作鞭炮爆炸效果

4）添加鞭炮音效

代碼實(shí)現(xiàn)

構(gòu)建鞭炮

首先準(zhǔn)備一條豎線，作為這串鞭炮的總捻子。

然后沿著捻子在兩邊排放鞭炮，每個(gè)鞭炮的實(shí)現(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>

安排小兔上場(chǎng)點(diǎn)火

兔年點(diǎn)炮動(dòng)作就交給小兔吧！在上面加個(gè)按鈕用來(lái)觸發(fā)點(diǎn)炮動(dòng)作。

$(".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;
}

添加音頻

沒(méi)有聲音的鞭炮是沒(méi)有靈魂的。

<audio src="http://downsc.chinaz.net/Files/DownLoad/sound/huang/cd9/mp3/222.mp3" id="audio_box"></audio>

到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)放鞭炮動(dòng)畫效果的文章就介紹到這了,更多相關(guān)JavaScript放鞭炮動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: