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

科技农民工
445 阅读1分钟

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

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

效果演示

20220106_154903.gif

需求分析

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

代码设计

设计鞭炮主体燃烧绳

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

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

设计单个鞭炮

效果如下图 微信截图_20220106152734.png 在鞭炮绳容器中添加鞭炮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样式属性设置每个鞭炮的位置，效果如图.

微信截图_20220106153447.png

具体代码如下：

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>
avatar
文章
阅读
粉丝