陪你一起看流星雨动画效果-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
AAAAAAAAAKDsEIAAAAAAAAAAAICyQwACAAAAAAAAAADKjtftAgAAAAAAM2PdHXfUtxw6f.........完整代码请登录后点击上方下载按钮下载查看