前言
快过年了，爆竹都买了吗，买了之后家里允许燃放吗，还是点个电子的爆竹过过瘾吧！
效果演示
需求分析
要有燃烧效果要有掉落效果代码设计
设计鞭炮主体燃烧绳
设置鞭炮绳为宽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>
