2023年最新html5cavnas新年倒计时烟花动画特效

效果图

 利用html5cavnas实现烟花特效，文字特效，新年倒计时，月亮动画特效

 1.找素材背景

百度搜了几张图片

2.抠图

网上找了在线美图秀秀，发现要钱，就顺便po解了一下，扣出素材

 3.编写代码

添加代码结构
 

<div id="h1"></div>
<div style="height:100vh;overflow:hidden;">
    <canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas>
    <div class="city">
        <img class='img1' src="img/city.png"/>
        <img class='img2' src="img/build.png"/>
        <img class='img3' src="img/dfmz.png"/>
    </div>
    <img src="img/moon.png" id="myoon"  />
    <img src="img/man.png" id="person"/>
    <div style="display:none">
        <div class="shape">新年快乐</div>
        <div class="shape">合家幸福</div>
        <div class="shape">万事如意</div>
        <div class="shape">心想事成</div>
        <div class="shape">财源广进</div>
        <div class="shape">四海增辉</div>
        <div class="shape">鹏程万里</div>
        <div class="shape">五福临门</div>
        <div class="shape">六六大顺</div>
        <div class="shape">步步高升</div>
    </div>
</div>复制

4.添加样式

   body{margin:0;padding:0;overflow: hidden;background-color: black;}
        .city{
            width:100%;
            height:50vh;
        position:fixed;
        bottom: -12vh;
        z-index: 100; 
    }
    .img1{
        position:absolute;
        z-index: 998;
        left:  20vw;
        width: 60vw;
        height: 80vh;
        bottom: -30vh;
    }
    .img2{
        position:absolute;
        z-index: 997;
        height: 15vw;
        right:  0;
        bottom: 5vh;
    }
    .img3{
        position:absolute;
        z-index: 999;
        height: 30vw;
        left:  0;
        bottom: 5vh;
    }
    #person{
        position: fixed;top: 70px;right: 180px;width: 200px;height: 200px;
        -webkit-transform: rotate(-15deg);
    }
 复制