星空闪耀月亮当空照效果-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;
            z-index: 2;
        }
        .clouds {
            background: transparent url(http://repo.bfw.wiki/bfwrepo/icon/5e04129e2141c.png) repeat top center;
            z-index: 3;

            -moz-animation: move-clouds-back 200s linear infinite;
            -ms-animation: move-clouds-back 200s linear infinite;
            -o-animation: move-clouds-back 200s linear infinite;
            -webkit-animation: move-clouds-back 200s linear infinite;
            animation: move-clouds-back 200s linear infinite;
        }
    </style>

</head>
<body translate="no">
    <div class="wrapper">
        <div class="clock animated flipInX"></div>
    </div>
    <canvas id="confetti"></canvas>
    <div class="message">
        Happy New Year !!!
    </div>
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="moon">
    
    </div>
    <div class="clouds"></div>



    <script type="text/javascript" charset="utf-8">
        (function() {
            var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;

            NUM_CONFETTI = 350;

            COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

            PI_2 = 2 * Math.PI;

            canvas = document.getElementById("confetti");
            context = canvas.getContext("2d");

            window.w = 0;
            window.h = 0;

            resizeWindow = function() {
                window.w = canvas.width = window.innerWidth;
                return window.h = canvas.height = window.innerHeight;
            };

            .........完整代码请登录后点击上方下载按钮下载查看

星空闪耀月亮当空照效果

网友评论0

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码

css实现div丁字形布局代码