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

迷南。 2024-03-30 09:17 58阅读 0赞

效果图

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

![75fbd12721ea41c68239517f079ae533.png][]

![f9c12133c3194e889fa360816b22a2b5.png][]

**1.找素材背景**

百度搜了几张图片

**2.抠图**

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

![1bae712d729f4f4bbfc0c30722c1f5d3.png][]

**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);
        }

[75fbd12721ea41c68239517f079ae533.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/11ca9f7c826545f686358f6ead720954.png
[f9c12133c3194e889fa360816b22a2b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1e88ec3d4b374fef8c4fbc6e7478a0bc.png
[1bae712d729f4f4bbfc0c30722c1f5d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/75bd503c700f4bd393317c46e674f459.png