新年倒计时星空版-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 200.........完整代码请登录后点击上方下载按钮下载查看