CSS：svg倒计时

 

 

*{margin: 0;padding: 0;}
body{font-family: "Microsoft YaHei"}
/*-------------------------
    The clocks
--------------------------*/

.time-countdown{color: #7d7d7d;width: 220px;float: left;text-align: left;font-weight:bold;padding-left:58px;}
.time-countdown dt{font-size: 13px;}
.time-countdown dd{font-size: 14px;}
.clock .display{
    text-align:center;
    /*padding: 40px 20px 20px;*/
    /*border-radius:6px;*/
    position:relative;
    width: 40px;
    height: 40px;
}
.clock>div{
    width: 40px;
    height: 40px;
    float: left;
    line-height: 40px;
    text-align: center;
}
.clock{
    height: 40px;
}

.clock .digits div span{
    background-color:#ff5454;
    border-color:#ff5454;
}

.clock .digits div.dots:before,
.clock .digits div.dots:after{
    background-color:#272e38;
}

.clock .display{
    background-color:#191919;
    box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}


/*-------------------------
    The Digits
--------------------------*/

.clock .digits div{
    text-align:left;
    position:relative;
    width:14px;
    height:19px;
    display:inline-block;
    margin:6px -1px;
}

.clock .digits div span{
    opacity:0.1;
    position:absolute;
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    transition:0.25s;
}

.clock .digits div span:before,
.clock .digits div span:after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:5px solid transparent;
}

.clock .digits .d1{height:3px;width:6px;top:0;left:4px;}
.clock .digits .d1:before{border-width:0 3px 3px 0;border-right-color:inherit;left:-3px;}
.clock .digits .d1:after{border-width:0 0 3px 3px;border-left-color:inherit;right:-3px;}

.clock .digits .d2{height:3px;width:6px;top:12px;left:4px;}
.clock .digits .d2:before{border-width:1px 3px 2px;border-right-color:inherit;left:-5px;}
.clock .digits .d2:after{border-width:1px 3px 2px;border-left-color:inherit;right:-5px;}

.clock .digits .d3{height:3px;width:6px;top:24px;left:4px;}
.clock .digits .d3:before{border-width:3px 3px 0 0;border-right-color:inherit;left:-3px;}
.clock .digits .d3:after{border-width:3px 0 0 3px;border-left-color:inherit;right:-3px;}

.clock .digits .d4{width:3px;height:6px;top:4px;left:0;}
.clock .digits .d4:before{border-width:0 3px 3px 0;border-bottom-color:inherit;top:-3px;}
.clock .digits .d4:after{border-width:0 0 3px 3px;border-left-color:inherit;bottom:-3px;}

.clock .digits .d5{width:3px;height:6px;top:4px;right:0;}
.clock .digits .d5:before{border-width:0 0 3px 3px;border-bottom-color:inherit;top:-3px;}
.clock .digits .d5:after{border-width:3px 0 0 3px;border-top-color:inherit;bottom:-3px;}

.clock .digits .d6{width:3px;height:6px;top:17px;left:0;}
.clock .digits .d6:before{border-width:0 3px 3px 0;border-bottom-color:inherit;top:-3px;}
.clock .digits .d6:after{border-width:0 0 3px 3px;border-left-color:inherit;bottom:-3px;}

.clock .digits .d7{width:3px;height:6px;top:17px;right:0;}
.clock .digits .d7:before{border-width:0 0 3px 3px;border-bottom-color:inherit;top:-3px;}
.clock .digits .d7:after{border-width:3px 0 0 3px;border-top-color:inherit;bottom:-3px;}


/* 1 */

.clock .digits div.one .d5,
.clock .digits div.one .d7{
    opacity:1;
}

/* 2 */

.clock .digits div.two .d1,
.clock .digits div.two .d5,
.clock .digits div.two .d2,
.clock .digits div.two .d6,
.clock .digits div.two .d3{
    opacity:1;
}

/* 3 */

.clock .digits div.three .d1,
.clock .digits div.three .d5,
.clock .digits div.three .d2,
.clock .digits div.three .d7,
.clock .digits div.three .d3{
    opacity:1;
}

/* 4 */

.clock .digits div.four .d5,
.clock .digits div.four .d2,
.clock .digits div.four .d4,
.clock .digits div.four .d7{
    opacity:1;
}

/* 5 */

.clock .digits div.five .d1,
.clock .digits div.five .d2,
.clock .digits div.five .d4,
.clock .digits div.five .d3,
.clock .digits div.five .d7{
    opacity:1;
}

/* 6 */

.clock .digits div.six .d1,
.clock .digits div.six .d2,
.clock .digits div.six .d4,
.clock .digits div.six .d3,
.clock .digits div.six .d6,
.clock .digits div.six .d7{
    opacity:1;
}


/* 7 */

.clock .digits div.seven .d1,
.clock .digits div.seven .d5,
.clock .digits div.seven .d7{
    opacity:1;
}

/* 8 */

.clock .digits div.eight .d1,
.clock .digits div.eight .d2,
.clock .digits div.eight .d3,
.clock .digits div.eight .d4,
.clock .digits div.eight .d5,
.clock .digits div.eight .d6,
.clock .digits div.eight .d7{
    opacity:1;
}

/* 9 */

.clock .digits div.nine .d1,
.clock .digits div.nine .d2,
.clock .digits div.nine .d3,
.clock .digits div.nine .d4,
.clock .digits div.nine .d5,
.clock .digits div.nine .d7{
    opacity:1;
}

/* 0 */

.clock .digits div.zero .d1,
.clock .digits div.zero .d3,
.clock .digits div.zero .d4,
.clock .digits div.zero .d5,
.clock .digits div.zero .d6,
.clock .digits div.zero .d7{
    opacity:1;
}


/* The dots */

.clock .digits div.dots{
    width:5px;
}

.clock .digits div.dots:before,
.clock .digits div.dots:after{
    width:5px;
    height:5px;
    content:'';
    position:absolute;
    left:0;
    top:14px;
}

.clock .digits div.dots:after{
    top:34px;
}
.btn-group-bottom .time-countdown{color: #7d7d7d;font-size: 16px;font-weight: bold;}
.btn-group-bottom .time-countdown dt{height: 34px;line-height: 34px;}
.w50{height: 50px;}
.w50 .display{width: 50px;height: 50px;}
.w50>div{width: 50px;height: 50px;line-height:50px;}
.w50 .digits div{width:16px;margin: 13px -1px 0 0;}
.w50 .digits .d1{height:4px;width:6px;top:0;left:5px;}
.w50 .digits .d1:before{border-width:0 4px 4px 0;border-right-color:inherit;left:-4px;}
.w50 .digits .d1:after{border-width:0 0 4px 4px;border-left-color:inherit;right:-4px;}

.w50 .digits .d2{height:4px;width:6px;top:11px;left:5px;}
.w50 .digits .d2:before{border-width:2px 4px 2px;border-right-color:inherit;left:-8px;}
.w50 .digits .d2:after{border-width:2px 4px 2px;border-left-color:inherit;right:-8px;}

.w50 .digits .d3{height:4px;width:6px;top:22px;left:5px;}
.w50 .digits .d3:before{border-width:4px 4px 0 0;border-right-color:inherit;left:-4px;}
.w50 .digits .d3:after{border-width:4px 0 0 4px;border-left-color:inherit;right:-4px;}

.w50 .digits .d4{width:4px;height:4px;top:4px;left:0;}
.w50 .digits .d4:before{border-width:0 4px 4px 0;border-bottom-color:inherit;top:-4px;}
.w50 .digits .d4:after{border-width:0 0 4px 4px;border-left-color:inherit;bottom:-4px;}

.w50 .digits .d5{width:4px;height:4px;top:4px;right:0;}
.w50 .digits .d5:before{border-width:0 0 4px 4px;border-bottom-color:inherit;top:-4px;}
.w50 .digits .d5:after{border-width:4px 0 0 4px;border-top-color:inherit;bottom:-4px;}

.w50 .digits .d6{width:4px;height:4px;top:18px;left:0;}
.w50 .digits .d6:before{border-width:0 4px 4px 0;border-bottom-color:inherit;top:-4px;}
.w50 .digits .d6:after{border-width:0 0 4px 4px;border-left-color:inherit;bottom:-4px;}

.w50 .digits .d7{width:4px;height:4px;top:18px;right:0;}
.w50 .digits .d7:before{border-width:0 0 4px 4px;border-bottom-color:inherit;top:-4px;}
.w50 .digits .d7:after{border-width:4px 0 0 4px;border-top-color:inherit;bottom:-4px;}


.ees-match-list .item-time{position: absolute;right:8px;top:20px;text-align: left;width: 150px;height: 58px;}
.ees-match-list .item-time dt{height: 34px;line-height: 34px;margin-bottom:3px;}
.ees-match-list .item-time dt span{height:inherit;float: left;margin: 0 3px;}
.ees-match-list .item-time .box{width: 34px;background: #191919;margin:0;color: #ff5454;text-align: center;}
.ees-match-list .item-time dd{padding-left: 4px;}

.ees-match-list .item-time{position: absolute;right:8px;top:20px;text-align: left;width: 150px;height: 58px;font-weight: bold;color: #7d7d7d;font-size: 13px;}
.ees-match-list .item-time dt{height:28px;line-height:28px;}
.w34{height: 34px;}
.w34 .display{width: 34px;height: 34px;}
.w34>div{width: 34px;height: 34px;line-height:34px;}
.w34 .digits div{width:10px;margin: 9px -1px 0 0;}
.w34 .digits .d1{height:2px;width:4px;top:0;left:3px;}
.w34 .digits .d1:before{border-width:0 2px 2px 0;border-right-color:inherit;left:-2px;}
.w34 .digits .d1:after{border-width:0 0 2px 2px;border-left-color:inherit;right:-2px;}

.w34 .digits .d2{height:2px;width:2px;top:7px;left:4px;}
.w34 .digits .d2:before{border-width:1px 4px 1px;border-right-color:inherit;left:-8px;}
.w34 .digits .d2:after{border-width:1px 4px 1px;border-left-color:inherit;right:-8px;}

.w34 .digits .d3{height:2px;width:4px;top:14px;left:3px;}
.w34 .digits .d3:before{border-width:2px 2px 0 0;border-right-color:inherit;left:-2px;}
.w34 .digits .d3:after{border-width:2px 0 0 2px;border-left-color:inherit;right:-2px;}

.w34 .digits .d4{width:2px;height:3px;top:2px;left:0;}
.w34 .digits .d4:before{border-width:0 2px 2px 0;border-bottom-color:inherit;top:-2px;}
.w34 .digits .d4:after{border-width:0 0 2px 2px;border-left-color:inherit;bottom:-2px;}

.w34 .digits .d5{width:2px;height:3px;top:2px;right:0;}
.w34 .digits .d5:before{border-width:0 0 2px 2px;border-bottom-color:inherit;top:-2px;}
.w34 .digits .d5:after{border-width:2px 0 0 2px;border-top-color:inherit;bottom:-2px;}

.w34 .digits .d6{width:2px;height:3px;top:11px;left:0;}
.w34 .digits .d6:before{border-width:0 2px 2px 0;border-bottom-color:inherit;top:-2px;}
.w34 .digits .d6:after{border-width:0 0 2px 2px;border-left-color:inherit;bottom:-2px;}

.w34 .digits .d7{width:2px;height:3px;top:11px;right:0;}
.w34 .digits .d7:before{border-width:0 0 2px 2px;border-bottom-color:inherit;top:-2px;}
.w34 .digits .d7:after{border-width:2px 0 0 2px;border-top-color:inherit;bottom:-2px;}

 

 

<dl class="item-time">
    <dd>
        <div class="clock w34">
            <div class="display">
                <div class="digits">
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                </div>
            </div>
            <div>小时</div>
            <div class="display">
                <div class="digits">
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                </div>
            </div>
            <div>分钟</div>
        </div>
    </dd>
    <dt>后开始报名</dt>
</dl>
<div class="btn-group-bottom">
    <dl class="time-countdown">
        <dt>报名开始倒计时</dt>
        <dd>
            <div class="clock w50">
                <div class="display">
                    <div class="digits">
                        <div class="eight">
                            <span class="d1"></span>
                            <span class="d2"></span>
                            <span class="d3"></span>
                            <span class="d4"></span>
                            <span class="d5"></span>
                            <span class="d6"></span>
                            <span class="d7"></span>
                        </div>
                        <div class="eight">
                            <span class="d1"></span>
                            <span class="d2"></span>
                            <span class="d3"></span>
                            <span class="d4"></span>
                            <span class="d5"></span>
                            <span class="d6"></span>
                            <span class="d7"></span>
                        </div>
                    </div>
                </div>
                <div>小时</div>
                <div class="display">
                    <div class="digits">
                        <div class="eight">
                            <span class="d1"></span>
                            <span class="d2"></span>
                            <span class="d3"></span>
                            <span class="d4"></span>
                            <span class="d5"></span>
                            <span class="d6"></span>
                            <span class="d7"></span>
                        </div>
                        <div class="eight">
                            <span class="d1"></span>
                            <span class="d2"></span>
                            <span class="d3"></span>
                            <span class="d4"></span>
                            <span class="d5"></span>
                            <span class="d6"></span>
                            <span class="d7"></span>
                        </div>
                    </div>
                </div>
                <div>分钟</div>
            </div>
        </dd>
    </dl>
</div>
<dl class="time-countdown">
    <dt>报名开始倒计时</dt>
    <dd>
        <div class="clock w40">
            <div class="display">
                <div class="digits">
                    <div class="one">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                </div>
            </div>
            <div>小时</div>
            <div class="display">
                <div class="digits">
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                    <div class="eight">
                        <span class="d1"></span>
                        <span class="d2"></span>
                        <span class="d3"></span>
                        <span class="d4"></span>
                        <span class="d5"></span>
                        <span class="d6"></span>
                        <span class="d7"></span>
                    </div>
                </div>
            </div>
            <div>分钟</div>
        </div>
    </dd>
</dl>