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