利用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放鞭炮动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了深入浅出理解JavaScript闭包的功能与用法,结合实例形式从变量、函数的内部属性与作用域链分析了javascript闭包的相关概念、功能与使用技巧,需要的朋友可以参考下2018-08-08
有时候可能为了一些更好的广告效果等原因，需要让用户等待一段时间以后，再显示真实下载地址代码，有利于缓解服务器压力。2010-04-04
本篇文章主要介绍了浅谈gulp创建完整的项目流程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了js带前后翻页的图片切换效果，图片切换效果特别适合做产品展示，感兴趣的小伙伴可以参考下。2015-09-09
在uni-app中弹窗的用途很常见,比如商品规格选取、广告弹窗等,下面这篇文章主要给大家介绍了关于uniapp微信小程序与H5的弹窗滚动穿透解决方法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了微信小程序实现的贪吃蛇游戏,结合实例形式分析了微信小程序实现贪吃蛇游戏功能的相关界面布局与代码逻辑操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
大家都知道将多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，除了使用朴素的循环转换以外，我们还可以利用Javascript的语言特性和数据结构的思想实现更为简洁优雅的转换。下面跟着小编一起来学习学习关于JavaScript如何实现数组降维吧。2017-01-01
这篇文章主要介绍了详解JavaScript时间格式化的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了js实现从右向左缓缓浮出网页浮动层广告的方法,可实现右侧浮动广告的定时弹出及点击展开、折叠等功能,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了微信小程序实现授权登录之获取用户信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论