body {
    background: #88d0ff;
}
body *{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*高亮文本*/
    user-select:none;/*文本不可选中*/
    -webkit-user-select:none;
}
button{
    -webkit-tap-highlight-color: rgba(64, 135, 253, 0.56);
}
/*钟*/
.clock {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*设置钟的大小*/
    width: 300px;
    height: 300px;
}

.clock div{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

div.stopwatch0 {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -300px;
    bottom: 0;
    z-index : 0;

    width: 70px;
    height: 140px;

}
/*秒表按钮*/
div.stopwatch01 {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    width: 30px;
    height: 100px;
    border-radius: 4px;
    z-index : -1;

    background: #ffffff;
    box-shadow: 0 0 5px #d0d0d0;
}
.stopwatch02 {
    z-index : 2;

}
.stopwatch02 div{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -80px;
    bottom: 0;

    background: #ffffff;
    box-shadow: 0 0 5px #d0d0d0;
}
div.stopwatch11 {

    width: 60px;
    height: 50px;
    border-radius: 4px;
    z-index : 2;



}
div.stopwatch12 {
    width: 10px;
    height: 50px;
    border-radius: 0px;
    z-index : 3;
    position: absolute;
    left: 40px;


}
div.stopwatch13 {
    width: 10px;
    height: 50px;
    border-radius: 0px;
    z-index : 3;
    position: absolute;
    right: 40px;


}
div.stopwatch14 {
    width: 10px;
    height: 50px;
    border-radius: 0px;
    z-index : 4;
    position: absolute;
    left: 25px;


}
div.stopwatch15 {
    width: 10px;
    height: 50px;
    border-radius: 0px;
    z-index : 4;
    position: absolute;
    right: 25px;


}
/*秒表按钮*/
div.backwatch {

    right: -200px;

    width: 120px;
    height: 30px;
    border-radius: 4px;
    z-index : 0;

    background: #ffffff;
    box-shadow: 0 0 1px #e8e8e8;
}
.outer {
    /*div大小 背景透明*/
    width: 250px;
    height: 250px;
    /*圆角 及圆角程度*/
    border: 15px solid #fff;
    border-radius: 200px;
    z-index : 1;
    -webkit-animation: outer 1.4s;
    animation: outer 1.4s;
}
.inner {
    width: 250px;
    height: 251px;
    z-index : 1;
    border-radius: 164px;
    background: #e3e3e3;
    /*四周阴影 -inset 内部,默认外部*/
    box-shadow: inset 0 10px 10px #aaa, 0 20px 45px #000;
    /*动画*/
    /*-webkit-transform-origin: center center;*/
    -webkit-animation: inner 1.8s;
    animation: inner 1.8s;
}
/*表盘刻度*/
.indicator div{
    width: 2px;
    height: 3px;
    background-color: #0f0f0f;
    z-index : 2;
}
/*分别设置各个刻度的位置和角度*/
.indicator div:nth-child(1) {
    transform: rotate(30deg) translateY(-113px);
    -webkit-animation: outer 2.0s;
    animation: outer 2.0s;
}
.indicator div:nth-child(2) {
    transform: rotate(60deg) translateY(-113px);
    -webkit-animation: outer 2.2s;
    animation: outer 2.2s;
}
.indicator div:nth-child(3) {
    transform: rotate(90deg) translateY(-113px);
    height: 6px;
    -webkit-animation: outer 2.4s;
    animation: outer 2.4s;
}
.indicator div:nth-child(4) {
    transform: rotate(120deg) translateY(-113px);
    -webkit-animation: outer 2.6s;
    animation: outer 2.6s;
}
.indicator div:nth-child(5) {
    transform: rotate(150deg) translateY(-113px);
    -webkit-animation: outer 2.8s;
    animation: outer 2.8s;
}
.indicator div:nth-child(6) {
    transform: rotate(180deg) translateY(-113px);
    height: 6px;
    -webkit-animation: outer 3.0s;
    animation: outer 3.0s;
}
.indicator div:nth-child(7) {
    transform: rotate(210deg) translateY(-113px);
    -webkit-animation: outer 3.2s;
    animation: outer 3.2s;
}
.indicator div:nth-child(8) {
    transform: rotate(240deg) translateY(-113px);
    -webkit-animation: outer 3.4s;
    animation: outer 3.4s;
}
.indicator div:nth-child(9) {
    transform: rotate(270deg) translateY(-113px);
    height: 6px;
    -webkit-animation: outer 3.6s;
    animation: outer 3.6s;
}
.indicator div:nth-child(10) {
    transform: rotate(300deg) translateY(-113px);
    -webkit-animation: outer 3.8s;
    animation: outer 3.8s;
}
.indicator div:nth-child(11) {
    transform: rotate(330deg) translateY(-113px);
    -webkit-animation: outer 4.0s;
    animation: outer 4.0s;
}
.indicator div:nth-child(12) {
    transform: rotate(360deg) translateY(-113px);
    height: 6px;
    background-color: #c00;
    -webkit-animation: outer 4.2s;
    animation: outer 4.2s;
}
.pointer {
    background: #fff;
    box-shadow: 0 0 5px #ddd;

    z-index : 2;
}
div.hour {
    width: 12px;
    height: 55px;
    top: 55px;
    border-radius: 14px;
    -webkit-transform: rotate(180deg);
    transform-origin: 6px 0px;
}
div.minute {
    width: 10px;
    height: 90px;
    top: 90px;
    border-radius: 10px;
    -webkit-transform: rotate(180deg);
    transform-origin: 5px 0px;
}
div.second {
    width: 4px;
    height: 130px;
    top: 90px;
    border-radius: 4px;
    -webkit-transform: rotate(180deg);
    -webkit-transform-origin: 2px 20px;/*设置旋转中心*/
}
.shadow {
    opacity: 0;/*不透明级*/
}

.center {
    /*div大小 背景透明*/
    width: 20px;
    height: 20px;
    /*圆角 及背景*/
    background: #ffffff;
    border-radius: 20px;
    z-index : 5;

    box-shadow: 0 3px 3px #aaa;
    -webkit-animation: center1 2.1s ;/*infinite*/
}
/* 动画 */
@-webkit-keyframes inner {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.05);
    }
    80% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes outer {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes center1 {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    75% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    90% {
        -webkit-transform: scale(1.05);
    }
    95% {
        -webkit-transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes setstopwatch {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    49% {
        -webkit-transform: scale(0);
        top:-260px;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    52% {
        -webkit-transform: scale(0.9);
    }
    55% {
        -webkit-transform: scale(1);
        top:-240px;
    }
    60% {
        top:-250px;
    }
    80% {
        top:-330px;
    }
    100%{
        top:-300px;
    }

}

@-webkit-keyframes onstopwatch {

    0% {
        top:-300px;
    }
    50% {
        top:-270px;
    }
    100%{
        top:-300px;
    }

}

@-webkit-keyframes setbackwatch {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    49% {
        -webkit-transform: scale(0);
        right:-160px;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    52% {
        -webkit-transform: scale(0.9);
    }
    55% {
        -webkit-transform: scale(1);
        right:-140px;
    }
    60% {
        right:-150px;
    }
    80% {
        right:-230px;
    }
    100%{
        right:-200px;
    }

}

@-webkit-keyframes onbackwatch {

    0% {
        right:-200px;
    }
    50% {
        right:-170px;
    }
    100%{
        right:-200px;
    }

}



@keyframes inner {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    70% {
        -webkit-transform: scale(1.05);
    }
    80% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@keyframes outer {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes center1 {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    75% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    90% {
        -webkit-transform: scale(1.05);
    }
    95% {
        -webkit-transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes setstopwatch {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    49% {
        -webkit-transform: scale(0);
        top:-260px;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    52% {
        -webkit-transform: scale(0.9);
    }
    55% {
        -webkit-transform: scale(1);
        top:-240px;
    }
    60% {
        top:-250px;
    }
    80% {
        top:-330px;
    }
    100%{
        top:-300px;
    }

}

@keyframes onstopwatch {

    0% {
        top:-300px;
    }
    50% {
        top:-270px;
    }
    100%{
        top:-300px;
    }

}

@keyframes setbackwatch {

    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    49% {
        -webkit-transform: scale(0);
        right:-160px;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    52% {
        -webkit-transform: scale(0.9);
    }
    55% {
        -webkit-transform: scale(1);
        right:-140px;
    }
    60% {
        right:-150px;
    }
    80% {
        right:-230px;
    }
    100%{
        right:-200px;
    }

}

@keyframes onbackwatch {

    0% {
        right:-200px;
    }
    50% {
        right:-170px;
    }
    100%{
        right:-200px;
    }

}

@-webkit-keyframes stop-rotate{
    from{
        transform:rotate(180deg);
    }
    to{
        transform:rotate(540deg);
    }
}
@keyframes stop-rotate{
    from{
        transform:rotate(180deg);
    }
    to{
        transform:rotate(540deg);
    }
}


/*time-contianer*/

.time-contianer{
    position: absolute;
    margin: auto;
    left: 20px;
    right: 0;
    top: 380px;
    bottom: 0;

    width:150px;
    height:30px;

    opacity:.95;
    -webkit-animation: center1 2.1s ;/*infinite*/
}
.space{
    height:30px;
    width:15px;
    float:left;
    font-family: digit，Arial,Verdana,Sans-serif;
    font-size:14px;
    color:#fff;
    line-height:30px;
    position:relative;
    text-align:center;
}
.animcont0{
    height:30px;
    width:30px;
    overflow:hidden;
    float:left;
    margin:0 1px;
}
.animcont{
    height:30px;
    width:15px;
    overflow:hidden;
    float:left;
    margin:0 1px;
}
.min0,.min1,.sec0,.sec1{
    font-family:Abel，Arial,Verdana,Sans-serif;
    width:15px;
    font-size:24px;

    color:#fff;
    line-height:30px;
    position:relative;
    text-align:center;
}
.hours{
    font-family:Abel，Arial,Verdana,Sans-serif;
    width:30px;
    font-size:24px;

    color:#fff;
    line-height:30px;
    position:relative;
    text-align:center;
}
.sec2{
    font-family:Abel，Arial,Verdana,Sans-serif;
    width:15px;
    font-size:20px;

    color:#fff;
    line-height:30px;
    position:relative;
    text-align:center;
}

.hours{
    /*-webkit-animation:hours steps(60) 86400s infinite;*/
}
.min0{
    /*-webkit-animation:sec0 steps(6) 3600s infinite;*/
}
.min1{
    /*-webkit-animation:sec1 steps(10) 600s infinite;*/
}
.sec0{
    /*-webkit-animation:sec1 steps(6) 60s infinite;*/
}
.sec1{
    /*-webkit-animation:sec1 steps(10) 10s infinite;*/
}
.sec2{

}

/*animations*/
@-webkit-keyframes hours0{
    from{
        top:0px;
    }
    to{
        top:-720px;
    }
}
@-webkit-keyframes hours1{
    from{
        top:0px;
    }
    to{
        top:-1800px;
    }
}

@-webkit-keyframes sec0{
    from{
        top:0px;
    }
    to{
        top:-180px;
    }
}
@-webkit-keyframes sec1{
    from{
        top:0px;
    }
    to{
        top:-300px;
    }
}