利用JavaScript实现放鞭炮动画效果

更新时间：2023年01月11日 08:22:49 作者：我是一只鱼吖

谈及过年，最先让人想到的就是，噼里啪啦的鞭炮声。本文将利用JavaScript实现一个简单的放鞭炮动画效果，感兴趣的小伙伴可以了解一下

前言

谈及过年，最先让人想到的就是，噼里啪啦的鞭炮声，小时候到了春节，点上一根香,把红色的鞭炮从那一排子里解出几个,放在石头上,用香火点着捻子,只听“啪"的一声,鞭炮响了,鞭炮皮炸了一地，爽的不行；然而现在由于各种原因不能像小时候一样痛快的放鞭炮了，鞭炮就是过年的灵魂，过年要是不放点烟花爆竹，总感觉少了点年味，没意思透了。只能在网上来实现这个小小的心愿了，体验小时候路边放鞭炮的快乐时光。效果图如下：

制作思路

1）首先构建一串鞭炮

2）点炮，兔年这个任务就交给可爱的小兔吧

3）制作鞭炮爆炸效果

4）添加鞭炮音效

代码实现

构建鞭炮

首先准备一条竖线，作为这串鞭炮的总捻子。

然后沿着捻子在两边排放鞭炮，每个鞭炮的实现方式如下：

<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>

安排小兔上场点火

兔年点炮动作就交给小兔吧！在上面加个按钮用来触发点炮动作。

$(".dear-joy").bind("click", function() {
        $(this).removeClass("jump").addClass("dian");
        setTimeout(function() {
            f.trigger("bang") //触发鞭炮爆炸效果
        }, 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>

到此这篇关于利用JavaScript实现放鞭炮动画效果的文章就介绍到这了,更多相关JavaScript放鞭炮动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

bootstrap table合并行数据并居中对齐效果
这篇文章主要为大家详细介绍了bootstrap table合并行数据并居中对齐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
JS获取当前网址、主机地址项目根路径
本文为大家提供JS如何获取当前网址、主机地址之后的目录及项目根路径的方法，喜欢的朋友可以收藏下
2013-11-11
firefox中JS读取XML文件
firefox中JS读取XML文件...
2006-12-12
使用JS来动态操作css的几种方法
这篇文章主要介绍了使用JS来动态操作css的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
JavaScript对JSON数组简单排序操作示例
这篇文章主要介绍了JavaScript对JSON数组简单排序操作,结合实例形式分析了javascript使用sort()方法针对json数组元素排序的相关操作技巧与注意事项,需要的朋友可以参考下
2019-01-01
一文读懂微信小程序页面导航
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,下面这篇文章主要给大家介绍了关于如何通过一文读懂微信小程序页面导航的相关资料,需要的朋友可以参考下
2022-11-11
原生JS实现表单checkbook获取已选择的值
本文为大家介绍下采用原生JS实现从一个表单checkbox获取到已选中的数据值，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
JavaScript 大数据相加的问题
写一个函数处理大数据的相加问题，所谓的大数据是指超出了整型，长整型之类的常规数据类型表示范围的数据。实现语言不限。
2011-08-08
JS实现简单贪吃蛇小游戏
这篇文章为大家详细主要介绍了JS实现简单贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
js实现1,2,3,5数字按照概率生成
这篇文章主要介绍了js实现1,2,3,5数字按照概率生成,需要的朋友可以参考下
2017-09-09