新年倒计时星空版-html代码-BFW代码库

代码语言：html

所属分类：动画

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

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

    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/flipclock.css">

    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/animate.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Great+Vibes'>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        *
        {
            margin: 0;
            padding: 0;

        }
        .message
        {
            font-family: 'Great Vibes', cursive;
            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 {
            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;
        }

        .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="clouds"></div>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/flipclock.js"></script>

    <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;
            };

            window.addEventListener('resize', resizeWindow, false);

            window.onload = function() {
                return setTimeout(resizeWindow, 0);
            };

            range = function(a, b) {
                return (b - a) * Math.random() + a;
            };

            drawCircle = function(x, y, r, style) {
                context.beginPath();
                context.arc(x, y, r, 0, PI_2, false);
                context.fillStyle = style;
             .........完整代码请登录后点击上方下载按钮下载查看