html,
#clock{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14pt;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
//	-moz-transform: rotate(180deg);  //
//    -webkit-transform: rotate(180deg);  //
//    -ms-transform: rotate(180deg);  //
//    -o-transform: rotate(180deg);  //
//    transform: rotate(180deg);  //
}
.bgcontainer{
    position: fixed;
    top:0;left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-size: 100% 100%;

}

#flipdiv {
    width: 100%;
    height: 100%;
}
#slideshow img.active{
    opacity: 1; /*有active类的图片不透明度为1，即显示图片*/
}
#canvas{

    position: absolute;
    top: 0;
    left: 0;

}
img.active{
    opacity: 1;
}
*{
    padding: 0;
    margin: 0;
}

#slideshow{
    position:absolute;
    top:0;left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -99999;
    background: center top no-repeat;
    background-size: 100% auto;

    margin: 0 auto; /*设置在页面水平居中*/

}
#slideshow img{
    position:absolute;
    top:0;left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -99999;
    background: center top no-repeat;
    background-size: 100% auto;
     /*图片采取绝对定位，均位于左上角，重叠在一起*/
    opacity: 0; /*初始不透明度为0，图片都看不见*/
    transition: opacity 1.6s linear; /*--重点--定义一个关于透明度的transition*/
}