星空闪耀月亮当空照效果-html代码-BFW代码库

星空闪耀月亮当空照效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        *
        {
            margin: 0;
            padding: 0;

        }
        .message
        {

            color: white;
            position: absolute;
            font-size: 95px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 200px;
            z-index: 50;
            margin: auto auto;
            line-height: 200px;
            text-align: center;
            display: none;
        }
        canvas {
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            z-index: 100;
            position: absolute;
        }

        .hide {
            display: none;
        }

        #confetti
        {
            display: none;
        }

@keyframes move-twink-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -10000px 5000px;
            }
        }
@-webkit-keyframes move-twink-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -10000px 5000px;
            }
        }
@-moz-keyframes move-twink-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -10000px 5000px;
            }
        }
@-ms-keyframes move-twink-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -10000px 5000px;
            }
        }

@keyframes move-clouds-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 10000px 0;
            }
        }
@-webkit-keyframes move-clouds-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 10000px 0;
            }
        }
@-moz-keyframes move-clouds-back {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 10000px 0;
            }
        }
@-ms-keyframes move-clouds-back {
            from {
                background-position: 0;
            }
            to {
                background-position: 10000px 0;
            }
        }

        .stars, .twinkling, .clouds, .moon{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

        .stars {
            background: #000 url(http://repo.bfw.wiki/bfwrepo/icon/5e041289eb9a3.png) repeat top center;
            z-index: 0;
        }

        .twinkling {
            background: transparent url(http://repo.bfw.wiki/bfwrepo/icon/5e0412d372f0b.png) repeat top center;
            z-index: 1;

            -moz-animation: move-twink-back 200s linear infinite;
            -ms-animation: move-twink-back 200s linear infinite;
            -o-animation: move-twink-back 200s linear infinite;
            -webkit-animation: move-twink-back 200s linear infinite;
            animation: move-twink-back 200s linear infinite;
        }
        .moon {
             background: transparent url(http://repo.bfw.wiki/bfwrepo/icon/5e0413ed4958c.png) no-repeat top center;
   .........完整代码请登录后点击上方下载按钮下载查看