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

前言

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

效果演示

需求分析

1. 要有燃烧效果
2. 要有掉落效果

代码设计

设计鞭炮主体燃烧绳

设置鞭炮绳为宽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样式属性设置每个鞭炮的位置，效果如