如何設置jquery倒計時的風格

Question

我使用的是jQuery countdown 該源代碼僅包含使倒計時工作所需的JavaScript。 我想知道我怎麼能得到相同的「動畫」風格「黑倒計時」這裏http://hilios.github.io/jQuery.countdown/

Answer 1

的main.css的風格是如下源：

/** 
 
* Main module 
 
*/ 
 
main a, 
 
main a:link, 
 
main a:visited { 
 
    color: #777; 
 
    text-decoration: underline; 
 
} 
 
main a:hover, 
 
main a:active, 
 
main a:visited:hover { 
 
    color: #000; 
 
    text-decoration: underline; 
 
} 
 
main article { 
 
    padding: 1em; 
 
} 
 
main [class*="pure-u-"]:first-child article { 
 
    padding-left: 0; 
 
} 
 
main [class*="pure-u-"]:last-child article { 
 
    padding-right: 0; 
 
} 
 
@media screen and (max-width: 48em) { 
 
    main article { 
 
    padding: 0 !important; 
 
    } 
 
} 
 
.main-example { 
 
    margin: 0 auto; 
 
    width: 355px; 
 
} 
 
.main-example .countdown-container { 
 
    height: 130px; 
 
} 
 
.main-example .time { 
 
    border-radius: 5px; 
 
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); 
 
    display: inline-block; 
 
    text-align: center; 
 
    position: relative; 
 
    height: 95px; 
 
    width: 65px; 
 

 
    -webkit-perspective: 500px; 
 
    -moz-perspective: 500px; 
 
    -ms-perspective: 500px; 
 
    -o-perspective: 500px; 
 
    perspective: 500px; 
 

 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 

 
    -webkit-transform: translateZ(0); 
 
    -moz-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    -o-transform: translateZ(0); 
 
    transform: translateZ(0); 
 

 
    -webkit-transform: translate3d(0,0,0); 
 
    -moz-transform: translate3d(0,0,0); 
 
    -ms-transform: translate3d(0,0,0); 
 
    -o-transform: translate3d(0,0,0); 
 
    transform: translate3d(0,0,0); 
 
} 
 
.main-example .count { 
 
    background: #202020; 
 
    color: #f8f8f8; 
 
    display: block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 2em; 
 
    line-height: 2.4em; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    text-align: center; 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 
 
    top: 0; 
 
    width: 100%; 
 

 
    -webkit-transform: translateZ(0); 
 
    -moz-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    -o-transform: translateZ(0); 
 
    transform: translateZ(0); 
 

 
    -webkit-transform-style: flat; 
 
    -moz-transform-style: flat; 
 
    -ms-transform-style: flat; 
 
    -o-transform-style: flat; 
 
    transform-style: flat; 
 
} 
 
.main-example .count.top { 
 
    border-top: 1px solid rgba(255,255,255,0.2); 
 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
 
    border-radius: 5px 5px 0 0; 
 
    height: 50%; 
 

 
    -webkit-transform-origin: 50% 100%; 
 
    -moz-transform-origin: 50% 100%; 
 
    -ms-transform-origin: 50% 100%; 
 
    -o-transform-origin: 50% 100%; 
 
    transform-origin: 50% 100%; 
 
} 
 
.main-example .count.bottom { 
 
    background-image: linear-gradient(rgba(255,255,255,0.1), transparent); 
 
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), transparent); 
 
    background-image: -moz-linear-gradient(rgba(255,255,255,0.1), transparent); 
 
    background-image: -ms-linear-gradient(rgba(255,255,255,0.1), transparent); 
 
    background-image: -o-linear-gradient(rgba(255,255,255,0.1), transparent); 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    border-radius: 0 0 5px 5px; 
 
    line-height: 0; 
 
    height: 50%; 
 
    top: 50%; 
 

 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    -ms-transform-origin: 50% 0; 
 
    -o-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
} 
 
.main-example .count.next { 
 
} 
 
.main-example .label { 
 
    font-size: normal; 
 
    margin-top: 5px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 95px; 
 
    width: 100%; 
 
} 
 
/* Animation start */ 
 
.main-example .count.curr.top { 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    -ms-transform: rotateX(0deg); 
 
    -o-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
    z-index: 3; 
 
} 
 
.main-example .count.next.bottom { 
 
    -webkit-transform: rotateX(90deg); 
 
    -moz-transform: rotateX(90deg); 
 
    -ms-transform: rotateX(90deg); 
 
    -o-transform: rotateX(90deg); 
 
    transform: rotateX(90deg); 
 
    z-index: 2; 
 
} 
 
/* Animation end */ 
 
.main-example .flip .count.curr.top { 
 
    -webkit-transition: all 250ms ease-in-out; 
 
    -moz-transition: all 250ms ease-in-out; 
 
    -ms-transition: all 250ms ease-in-out; 
 
    -o-transition: all 250ms ease-in-out; 
 
    transition: all 250ms ease-in-out; 
 

 
    -webkit-transform: rotateX(-90deg); 
 
    -moz-transform: rotateX(-90deg); 
 
    -ms-transform: rotateX(-90deg); 
 
    -o-transform: rotateX(-90deg); 
 
    transform: rotateX(-90deg); 
 
} 
 
.main-example .flip .count.next.bottom { 
 
    -webkit-transition: all 250ms ease-in-out 250ms; 
 
    -moz-transition: all 250ms ease-in-out 250ms; 
 
    -ms-transition: all 250ms ease-in-out 250ms; 
 
    -o-transition: all 250ms ease-in-out 250ms; 
 
    transition: all 250ms ease-in-out 250ms; 
 

 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    -ms-transform: rotateX(0deg); 
 
    -o-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
@media screen and (max-width: 48em) { 
 
    .main-example { 
 
    width: 100%; 
 
    } 
 
    .main-example .countdown-container { 
 
    height: 100px; 
 
    } 
 
    .main-example .time { 
 
     height: 70px; 
 
     width: 48px; 
 
    } 
 
    .main-example .count { 
 
    font-size: 1.5em; 
 
    line-height: 70px; 
 
    } 
 
    .main-example .label { 
 
    font-size: 0.8em; 
 
    top: 72px; 
 
    } 
 
}