svg圣诞节倒计时效果代码-html代码-BFW代码库

svg圣诞节倒计时效果代码

代码语言：html

所属分类：其他

代码描述：svg圣诞节倒计时效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Orbitron:900');
        html {
        height:100%;
    }
    body {
        background-image:linear-gradient(180deg,black,#192a56 65%,#130f40);
        overflow:hidden;
        color:white;
    }
    #timer {
        position:absolute;
        top:35%;
        left:50%;
        transform:translate(-50%,-50%);
        width:600px;
        height:150px;
        font-family:'Orbitron',sans-serif;
        font-size:48px;
    }
    .time {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .dcon {
        position:absolute;
        width:25%;
        height:100%;
    }
    .dcon:after {
        content:'Days';
        font-size:28px;
        position:absolute;
        transform:translate(-50%,-50%);
        left:50%;
        top:120%;
    }
    .hcon {
        position:absolute;
        left:150px;
        width:25%;
        height:100%;
    }
    .hcon:after {
        content:'Hours';
        font-size:28px;
        position:absolute;
        transform:translate(-50%,-50%);
        left:50%;
        top:120%;
    }
    .mcon {
        position:absolute;
        left:300px;
        width:25%;
        height:100%;
    }
    .mcon:after {
        content:'Minutes';
        font-size:28px;
        position:absolute;
        transform:translate(-50%,-50%);
        left:50%;
        top:120%;
    }
    .scon {
        position:absolute;
        left:450px;
        width:25%;
        height:100%;
    }
    .scon:after {
        content:'Seconds';
        font-size:28px;
        position:absolute;
        transform:translate(-50%,-50%);
        left:50%;
        top:120%;
    }
    .land {
        position:absolute;
        top:65%;
        left:0%;
        width:100%;
        height:20vh;
        transform:tranlsate(-50%,-50%);
    }
    .house {
        position:fixed;
        width:25%;
        background:none;
        top:45%;
        left:1%;
    }
    .window {
        position:absolute;
        top:61%;
        left:50%;
        transform:translate(-50%,-50%);
        width:23%;
        height:23%;
        border-radius:6px;
        background:none;
        box-shadow:inset 0px 0px 36px white;
    }
    .snow {
        font-size:48px;
        text-shadow:0px 0px 12px;
        color:rgba(144,202,249,0.5);
    }
    .tree {
        position:fixed;
        width:25%;
        height:48vh;
        top:38%;
        left:77%;
    }
    .light {
        position:absolute;
        width:15px;
        height:15px;
        border-radius:50%;
    }
    .one {
        transform:translate(-50%,-50%);
        top:24%;
        left:50%;
        background:#F44336;
        box-shadow:0px 0px 48px #EF5350,0px 0px 36px #EF5350,0px 0px 24px #EF5350,0px 0px 48px #EF5350,0px 0px 36px #EF5350;
        animation:redlight 2s infinite;
        animation-delay:2s;
    }
    .two {
        transform:translate(-50%,-50%);
        top:40%;
        left:43%;
        background:#2196F3;
        box-shadow:0px 0px 48px #2196F3,0px 0px 36px #2196F3,0px 0px 24px #2196F3,0px 0px 48px #2196F3,0px 0px 36px #2196F3;
        animation:blulight 2s infinite;
        animation-delay:1.8s;
    }
    .thr {
        transform:translate(-50%,-50%);
        top:45%;
        left:60%;
        background:#FFC107;
        box-shadow:0px 0px 48px #FFC107,0px 0px 36px #FFC107,0px 0px 24px #FFC107,0px 0px 48px #FFC107,0px 0px 36px #FFC107;
        animation:yellight 2s infinite;
        animation-delay:1.6s;
    }
    .for {
        transform:translate(-50%,-50%);
        top:58%;
        left:50%;
        background:#F44336;
        box-shadow:0px 0px 48px #EF5350,0px 0px 36px #EF5350,0px 0px 24px #EF5350,0px 0px 48px #EF5350,0px 0px 36px #EF5350;
        animation:redlight 2s infinite;
        animation-delay:1.4s;
    }
    .fiv {
        transform:translate(-50%,-50%);
        top:68%;
        left:.........完整代码请登录后点击上方下载按钮下载查看