HTML CSS代码烟花特效_css礼花特效-优快云博客

本文链接：https://blog.youkuaiyun.com/dp6558dfggbhhn_/article/details/140158465

话不多说，先上效果图

不错，非常的漂亮，我们应该怎么做？跟着步骤来吧

首先先在桌面上面新建一个文本文档

然后打开文本文档输代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花</title>
    <style>
        html,
        body {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }
        
        span,
        ul {
            color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
    <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas>
    <script>
        function initVars() {
            pi = Math.PI;
            ctx = canvas.getContext("2d");
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            cx = canvas.width / 2;
            cy = canvas.height / 2;
            playerZ = -25;
            playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
            scale = 600;
            seedTimer = 0;
            seedInterval = 5, seedLife = 100;
            gravity = .02;
            seeds = new Array();
            sparkPics = new Array();
            s = "https://cantelope.org/NYE/";
            for (i = 1; i <= 10; ++i) {
                sparkPic = new Image();
                sparkPic.src = s + "spark" + i + ".png";
                sparkPics.push(sparkPic);
            }
            sparks = new Array();
            pow1 = new Audio(s + "pow1.ogg");
            pow2 = new Audio(s + "pow2.ogg");
            pow3 = new Audio(s + "pow3.ogg");
            pow4 = new Audio(s + "pow4.ogg");
            frames = 0;
        }
        function rasterizePoint(x, y, z) {
            var p, d;
            x -= playerX;
            y -= playerY;
            z -= playerZ;
            p = Math.atan2(x, z);
            d = Math.sqrt(x * x + z * z);
            x = Math.sin(p - yaw) * d;
            z = Math.cos(p - yaw) * d;
            p = Math.atan2(y, z);
            d = Math.sqrt(y * y + z * z);
            y = Math.sin(p - pitch) * d;
            z = Math.cos(p - pitch) * d;
            var rx1 = -1000,
                ry1 = 1,
                rx2 = 1000,
                ry