什么？都快过年了，你还没有买鞭炮

前言

快过年了，爆竹都买了吗，买了之后家里允许燃放吗，还是点个电子的爆竹过过瘾吧！

效果演示

需求分析

要有燃烧效果
要有掉落效果

代码设计

设计鞭炮主体燃烧绳

设置鞭炮绳为宽3px,高500px,颜色为#383838。

<div id="s" style="margin:0 auto;width: 3px;height:500px;background: #383838;position: relative;"></div>

设计单个鞭炮

效果如下图

在鞭炮绳容器中添加鞭炮div，通过position、top、left、transform: rotate等样式是的单个鞭炮位于鞭炮绳的两边，旋转60度。

<div id="s" style="margin:0 auto;width: 3px;height:500px;background: #383838;position: relative;"><div style="height: 50px; width: 20px; background: rgb(204, 59, 59); position: absolute; top: 0px; transform: rotate(60deg); left: -48px;"><div style="width: 2px; height: 20px; background: rgb(51, 51, 51); margin: 0px auto; position: absolute; top: -20px; left: calc(50% - 1px);"></div></div><div style="height: 50px; width: 20px; background: rgb(204, 59, 59); position: absolute; top: 0px; transform: rotate(-60deg); left: 32px;"><div style="width: 2px; height: 20px; background: rgb(51, 51, 51); margin: 0px auto; position: absolute; top: -20px; left: calc(50% - 1px);"></div></div>
</div>

将鞭炮动态添加到绳上

将上一步骤添加的静态代码通过js动态添加的鞭炮绳div容器中，通过top样式属性设置每个鞭炮的位置，效果如图.

具体代码如下：

var height = 500;
function reInit(){if(timer){clearInterval(timer)}height = 500;$("#s").css({height:height + 'px'})var topVal = 0;while(topVal < 500){var innerDiv = document.createElement("div");innerDiv.style = "width: 2px;height: 20px;background: #333;margin: 0 auto;position: absolute;top:-20px;left:calc(50% - 1px)";var baozhu = document.createElement("div");baozhu.style = "height:50px;width:20px;background: #cc3b3b;position: absolute;top: "+topVal+"px;transform: rotate(60deg);left:-48px;"baozhu.append(innerDiv)document.getElementById('s').append(baozhu)var innerDiv2 = document.createElement("div");innerDiv2.style = "width: 2px;height: 20px;background: #333;margin: 0 auto;position: absolute;top:-20px;left:calc(50% - 1px)";var baozhu2 = document.createElement("div");baozhu2.style = "height:50px;width:20px;background: #cc3b3b;position: absolute;top: "+topVal+"px;transform: rotate(-60deg);left:32px;"baozhu2.append(innerDiv2)document.getElementById('s').append(baozhu2)topVal += 25;}
}
reInit()

设计燃烧效果

在鞭炮绳尾部添加10X10红色正方形div,使用模糊滤镜使其呈燃烧效果。同理单个鞭炮燃烧时则在其尾部添加相同元素。

<div style="position: absolute; bottom: -2.5px; left: -4px; background: red; width: 10px; height: 10px; filter: blur(4px);"></div>

设计鞭炮掉落效果

通过定时器每100毫秒减少10px鞭炮绳长度，同时判断所有鞭炮位置，当大于鞭炮绳长度时则为单个鞭炮添加燃烧效果，执行掉落效果即：
通过过度动画使单个鞭炮向下移动并旋转1440度，动画持续时间为500 + 1000内随机数。

function start(){var innerDiv = document.createElement("div");innerDiv.style = "position: absolute;bottom: -2.5px;left: -4px;background: red;width: 10px;height: 10px;filter: blur(4px)";document.getElementById('s').append(innerDiv)timer = setInterval(function(){if(height <= 0){clearInterval(timer)return;}height -= 10;var arr= $("#s").children();for (var i = 0; i < arr.length; i++) {if(new Number(arr[i].style.top.replace('px','')) >= height){let time = 500 + 1000 * Math.random()let item = arr[i]//添加燃烧效果innerDiv = document.createElement("div");innerDiv.style = "position: absolute;top: -22.5px;left: 4px;background: red;width: 10px;height: 10px;filter: blur(4px)";item.append(innerDiv)//执行掉落效果arr[i].animate({top:'1000px',transform: 'rotate(-1440deg)'},time)setTimeout(function(){item.remove()},time)}}$("#s").css({height:height + 'px'})},100);
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><script type="text/javascript" src="${rc.contextPath}/static/js/jquery.min.js"></script>
</head>
<body>
<div id="div" style="position: relative"><div id="s" style="margin:0 auto;width: 3px;height:500px;background: #383838;position: relative;"></div><div style="position: absolute;top: 10px;right:5px;"><a href="javascript:void(0)" onclick="reInit()">重置</a><a href="javascript:void(0)" onclick="start()">点火</a></div>
</div>
<script>var height = 500;var timer;function reInit(){if(timer){clearInterval(timer)}height = 500;$("#s").css({height:height + 'px'})var topVal = 0;while(topVal < 500){var innerDiv = document.createElement("div");innerDiv.style = "width: 2px;height: 20px;background: #333;margin: 0 auto;position: absolute;top:-20px;left:calc(50% - 1px)";var baozhu = document.createElement("div");baozhu.style = "height:50px;width:20px;background: #cc3b3b;position: absolute;top: "+topVal+"px;transform: rotate(60deg);left:-48px;"baozhu.append(innerDiv)document.getElementById('s').append(baozhu)var innerDiv2 = document.createElement("div");innerDiv2.style = "width: 2px;height: 20px;background: #333;margin: 0 auto;position: absolute;top:-20px;left:calc(50% - 1px)";var baozhu2 = document.createElement("div");baozhu2.style = "height:50px;width:20px;background: #cc3b3b;position: absolute;top: "+topVal+"px;transform: rotate(-60deg);left:32px;"baozhu2.append(innerDiv2)document.getElementById('s').append(baozhu2)topVal += 25;}}reInit()function start(){var innerDiv = document.createElement("div");innerDiv.style = "position: absolute;bottom: -2.5px;left: -4px;background: red;width: 10px;height: 10px;filter: blur(4px)";document.getElementById('s').append(innerDiv)timer = setInterval(function(){if(height <= 0){clearInterval(timer)return;}height -= 10;var arr= $("#s").children();for (var i = 0; i < arr.length; i++) {if(new Number(arr[i].style.top.replace('px','')) >= height){let time = 500 + 1000 * Math.random()let item = arr[i]innerDiv = document.createElement("div");innerDiv.style = "position: absolute;top: -22.5px;left: 4px;background: red;width: 10px;height: 10px;filter: blur(4px)";item.append(innerDiv)arr[i].animate({top:'1000px',transform: 'rotate(-1440deg)'},time)setTimeout(function(){item.remove()},time)}}$("#s").css({height:height + 'px'})},100);}
</script></body>
</html>

什么？都快过年了，你还没有买鞭炮相关推荐

python实现微信抢红包神器_快过年啦，还怕手速慢，我用Python自动抢红包！
原标题:快过年啦,还怕手速慢,我用Python自动抢红包! 马上快过年啦,在春节的时间里,最少不了的就是大家在微信群里热热闹闹的发几个微信红包,图的就是一个喜庆. 今天,小编就带领大家用Python来 ...
python微信抢红包神器_快过年啦，还怕手速慢，我用Python自动抢红包！
马上快过年啦,在春节的时间里,最少不了的就是大家在微信群里热热闹闹的发几个微信红包,图的就是一个喜庆. 今天,小编就带领大家用Python来制作一个自动抢红包的程序,不用动手就可以抢红,一起来看看吧. ...
python自动抢红包软件_快过年啦，还怕手速慢，我用Python自动抢红包！
话不多说,下面小编将从基础配置开始,让大家实现自动抢红包的功能. 1).下载并打开AirtestIDE编辑器. AirtestIDE编辑器采用的是压缩包的形式, 小编已经为大家下载好压缩包,大家只需要 ...
快过年啦，还怕手速慢，我用Python自动抢红包！
相信大家在节假日期间都会和亲戚朋友互发红包吧,有时候是给个人发红包,有时候是在群里抢红包,其实大家都知道真正的意义并不在于红包里的那点钱,最重要的是红包增进了相互之间的感情,并且还增添了几分节日气氛. ...
快过年了，你不会还没有女（男）朋友叭，不会吧不会吧，那么着表白代码你值得拥有~
前言嗨喽~大家好,这里是魔王! 我发文章呢~一般都是爬虫,但是呢爬虫看多了,对身体不好,咋们今天就来点现实的!! 快过年了,家里也催的紧啦,今年是逃不过了,咋不能明年也是现状是叭学学表白代码,又 ...
2022年都快完了，还学Access的人是不是傻？
2022年都快完了,还学Access的人是不是傻?这是某问答平台,讨论火热的话题. 该问题下,部分程序员拍手称好,对Access语言充满不屑,认为Access过时该被淘汰,笔者作为开发者,并不赞同. ...
快过年了，来，来，来！给七大姑八大姨好好解释解释【啥是DBA 】
摘要:快过年了,我突然有点芳~又得给七大姑八大姨好好解释解释[啥是DBA] "二狗子,你在城里干啥子的哟?" "二姨,我是做数据库运维的,DBA" " ...
快过年了，分享 25 个 JS 实用技巧送给大家吧
本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~ 类型强制转换 1.1 string强制转换为数字可以用 *1来转化为数字(实际上是调用 .valueOf方法) ...
快过年了用Python抢红包
1. 概述快过年了,刚刚收到了两个消息,一个好消息,一个坏消息. 先说好消息,好消息就是微信群里有人要发红包,开心~ 不过转念一想,前几次的红包一个都没抢到,这次???不由自主的叹了一口气 ... ...