陪你一起看流星雨动画效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            width: 100%;
            height: 100%;
            position: fixed;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            filter: contrast(120%);
            background-color: black;
        }

        .container {
            width: 100%;
            height: 100%;
            background-image: radial-gradient(1600px at 70% 120%, rgba(33, 39, 80, 1) 10%, #020409 100%);
        }

        .content {
            width: inherit;
            height: inherit;
        }

        #universe {
            width: 100%;
            height: 100%;
        }

        #footerContent {
            font-family: sans-serif;
            font-size: 110%;
            color: rgba(200, 220, 255, .3);
            width: 100%;
            position: fixed;
            bottom: 0px;
            padding: 20px;
            text-align: center;
            z-index: 20;
        }

        #footer {
            position: absolute;
            bottom: 0px;
            height: 300px;
            width: 100%;
        }

        #scene {
            height: 100%;
            position: absolute;
            left: 50%;
            margin-left: -800px;
        }

        a {
            text-decoration: none;
            color: rgba(200, 220, 255, 1);
            opacity: .4;
            transition: opacity .4s ease;
        }

        a:hover {
            opacity: 1;
        }
    </style>

</head>
<body translate="no">
    <div class="container">
        <div class="content">
            <canvas id="universe"></canvas>
            <div id="footerContent">
              
            </div>
            <div id="footer">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg id="scene" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1600px" height="315px" viewBox="0 0 1600 315" enable-background="new 0 0 1600 315" xml:space="preserve">  <image id="image0" width="1600" height="315" x="0" y="0"
    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAAE7CAYAAACFTk0rAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAABmJLR0QA/wD/AP+gvaeTAAAA
CXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH4wwREiQwucK4YwAAUBlJREFUeNrt3Xl0XPWZ7vvn
t2suzZaFwQODiQ1mtDEBAsEOARKmQIAkxCY2djBD0p3uzrl9k3v6nrtye3XW6dW59/Tp3JzuQEg6
JHTIHDhpcjoJJAE7EMxoBlueJGNbsi1LlkpTzbX3/aOqpFJptiVtVen7WUvZ2rtq73qrZAernnp/
r3EcRwAAAAAAAAAAAOXEcrsAAAAAAAAAAACAqUYAAgAAAAAAAAAAyg4BCAAAAAAAAAAAKDsEIAAA
AAAAAAAAoOwQgAAAAAAAAAAAgLJDAAIAAAAAAAAAAMoOAQgAAAAAAAAAACg7BCAAAAAAAAAAAKDs
EIAAAAAAAAAAAICyQwACAAAAAAAAAADKDgEIAAAAAAAAAAAoOwQgAAAAAAAAAACg7BCAAAAAAAAA
AACAskMAAgAAAAAAAAAAyg4BCAAAAAAAAAAAKDsEIAAAAAAAAAAAoOwQgAAAAAAAAAAAgLJDAAIA
AAAAAAAAAMoOAQgAAAAAAAAAACg7BCAAAAAAAAAAAKDsEIAAAAAAAAAAAICyQwACAAAAAAAAAADK
DgEIAAAAAAAAAAAoOwQgAAAAAAAAAACg7BCAAAAAAAAAAACAskMAAgAAAAAAAAAAyg4BCAAAAAAA
AAAAKDsEIAAAAAAAAAAAoOwQgAAAAAAAAAAAgLJDAAIAAAAAAAAAAMoOAQgAAAAAAAAAACg7BCAA
AAAAAAAAAKDsEIAAAAAAAAAAAICyQwACAAAAAAAAAADKjtftAgAAAAAAM2PdHXfUtxw6fK1leVLv
O3fp77/zkx/H3K4JAAAAmC7GcRy3awAAAAAATKObr7/uosiJzgv6e/uWvdPc/FVJuuScpf8lGA61
1NXPe/v0M87Y/fiPpjcM+U+f22K1d3RU9/b1N8Tj8Zp0OhO0HcdjJBljMpZlpbw+X7/f7+8Lh0KR
quqq/ke/+0TK7dcOAAAApYsABAAAAADK2AP332f9/rfP/VNzy5EvjHaf1RdecH91bc3eQCjYWVtV
fSQcCke/84Mnk6f62J+9d12gu6vzjHi0f0G0v/+M51/b8dREz73i4gs3BQKBznA4dLyiovJouKIi
EgyHo49974m0268pAAAASgMBCAAAAACUsU/f/fF5P/7F/zwx2fNu/OA1V1VXV7eGwqFIMBhOyGPZ
Pr/f/pdvPTbiL5F//uADRpISyaSxk0l/14mOJS0trde9uqvx0al6LldefNGG004//aVwRUVnZVVV
37e/TxgCAACA0RGAAAAAAECZevCzGz27d+66adsrrz8zFddbdcGK+6ura5qqqioPz6urO1pdXZ34
xmPftjff86lQU3Pzh7e9NjWPM6FaVpz3udMaTnutYX7D7nn18/q/PkowAwAAgLmLAAQAAAAAytAD
n93o3fnOu7f96bU3J7zsVKm68Jyzv1JXV/t2Q8NpOxYsOK31m99jdggAAAAIQAAAAACgLK295srr
tr70yu/drmOmXXzu0v8cCAQ6a2pqdy1esvjNx3/8k363awIAAIA7CEAAAAAAoMzccctHz96zZ88D
e5oP/o3btbhp5fnnfaGmtmZnw/yGXQtOP739fzz2bdvtmgAAADBzCEAAAAAAoMysvuiCB9/YOXXD
x8vBNZevvu2sM8/a9oOf/7zH7VoAAAAwMyy3CwAAAAAATJ17bv/Ygs4Tne93u47Z5sXXXn/mjy++
+N+uWb361nvvurvS7XoAAAAw/egAAQAAAIAy8cCmjdazv/nNYwePHf+s27XMZu9bcuY/nH76gucu
ueSS3/3zt7/NL8UAAABligAEAAAAAMrETWvXXP6brdtedbuOUvGBVZfdPn/BaW/98j/+45DbtQAA
AGDqEYAAAAAAQBm45/aPLfjJvz9zzO06Ss0F5577pYVnnPGHc5ae88a3vvd9hqQDAACUEWaAAAAA
AEAZaDt29HK3ayhFu5qavvbcH//46q6du25+cOMGr9v1AAAAYOoQgAAAAABAiVt/5x31nZ2dK92u
o5S9+Prrz7z6yqsPb7rnUyG3awEAAMDUIAABAAAAgBLX0tJy9TtNB77qdh2lbseePd/444sv/gMh
CAAAQHkgAAEAAACAEvbQpg3eSHfkQrfrKBdNrUe+8OabOx78zN13V7pdCwAAAE4NAQgAAAAAlLCW
lpbz39nX/Pdu11FO3t637592793z8Xs/cXe127UAAADg5BGAAAAAAEAJO3LkyIfcrqEcvf7uziea
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
3hVu1wAAADAXWG.........完整代码请登录后点击上方下载按钮下载查看