陪你一起看流星雨动画效果-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
Dxz48AP3beT3ZgAAgBLldbsAAAAAAMDJ6450X+p2DeXq5TfefCoQ8H9I0gtu1wIAAIDJ45MsAAAA
AFCi7vzoR5YeONq2xe06yllXZ9fKW66/7iK36wAAAMDkEYAAAAAAQAl66L77PE//9tkmt+sod2/v
2ftPra2t1z903waf27UAAABgcghAAAAAAKAEJeJxv9s1zBVv79n3TwcOHLjsrx5+0LhdCwAAACaO
AAQAAAAASlA0Gq12u4a55NltL77c1tY2z+06AAAAMHEEIAAAAABQgnp6eha6XcNc03rk6Ko/f3AL
XSAAAAAlggAEAAAAAErMpnXrgr/ZuvUNt+uYa7a98uqz7cfb6QIBAAAoEQQgAAAAAFBiunt66tyu
Ya7q6OhY7nYNAAAAmBgCEAAAAAAoMYlYjADEJZFI9/JN69YF3K4DAAAA4yMAAQAAAIASk06lwm7X
MFe9sXPn421tbee6XQcAAADGRwACAAAAACUmlUpWuV3DXNbZ2XmB2zUAAABgfAQgAAAAAFBCPrt+
XeD57a/83u065rJEPDH/zx94wLhdBwAAAMZGAAIAAAAAJSTa31/tdg1z3Vt7dn/z+PHj89yuAwAA
AGMjAAEAAACAEtLb27vA7RogtR9vX+F2DQAAABgbAQgAAAAAlJC+vr5FbtcAqfPEidVu1wAAAICx
EYAAAAAAQAlJJhIsvTQLRGOxxW7XAAAAgLERgAAAAABACclkbL/bNUDKZDLhz65bH3S7DgAAAIyO
AAQAAAAASogjx+N2DZAOHD3y+WPH2pa6XQcAAABGRwACAAAAAKXEcbxul4Cs4+3tl7ldAwAAAEZH
AAIAAAAAJcRxbH6PmyUi3ZFLP3f/Fn4eAAAAsxT/UAMAAACAEuI4ogNklmhqOfzXsWg/M1kAAABm
KQIQAAAAACgRD2++z7LluF0GCnR3d89.........完整代码请登录后点击上方下载按钮下载查看