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

最新推荐文章于 2025-11-25 14:29:34 发布

原创

最新推荐文章于 2025-11-25 14:29:34 发布 · 492 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

这篇博客介绍如何利用CSS3设计电子鞭炮，包括燃烧和掉落效果。作者从需求分析开始，详细讲解了设计鞭炮主体燃烧绳、单个鞭炮、动态添加鞭炮、燃烧和掉落效果的实现方法，并提供了完整的代码示例。

前言

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

效果演示

在这里插入图片描述

需求分析

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

代码设计

设计鞭炮主体燃烧绳

设置鞭炮绳为宽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>