纯css计时器

image.png

代码和效果直接在这里取:
https://wy333.gitee.io/kole/timer/index.html

    
        
        
        
    
    
        

            
            
            
            

                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
:
                
                

                    
0 1 2 3 4 5 6
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
:
                
                

                    
0 1 2 3 4 5 6
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
:
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
                

                    
0 1 2 3 4 5 6 7 8 9
                
            
            

                Start
                Stop
                Reset
            
    

.timer {
    padding: 10px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    background: -webkit-linear-gradient(top, #222, #444);
}

.timer .cell {
    /*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/
    width: 0.60em;
    height: 40px;
    font-size: 50px;
    overflow: hidden;
    position: relative;
    float: left;
}

.timer .numbers {
    width: 0.6em;
    line-height: 40px;
    font-family: digital, arial, verdana;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #02F5B6;
    /* text-shadow: 0 0 5px rgba(255, 255, 255, 1); */
}

input[name="controls"] {display: none;}

/*秒表控制器样式*/
.timer_controls {
 margin-top: -5px;
}
.timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}

/*Control code*/
/*秒表暂停运转*/
#stop:checked~.timer .numbers {
    animation-play-state: paused;
}

/*秒表开始运转*/
#start:checked~.timer .numbers {
    animation-play-state: running;
}

/*重置秒表*/
#reset:checked~.timer .numbers {
    animation: none;
}

.moveten {
    /*使用分步骤来移动数字，10个数字等于10步*/
    animation: moveten 1s steps(10, end) infinite;
    /*默认情况下动画是停止不动的*/
    animation-play-state: paused;
}

.movesix {
    animation: movesix 1s steps(6, end) infinite;
}

/*同步时间的速率*/
/*每秒十个数字，因此也需要十步*/
.second {
    animation-duration: 10s;
}

.tensecond {
    /*60 times .second*/
    animation-duration: 60s;
}

.milisecond {
    /*1/10th of .second*/
    animation-duration: 1s;
}

.tenmilisecond {
    animation-duration: 0.1s;
}

.hundredmilisecond {
    animation-duration: 0.01s;
}

.minute {
    /*60 times .second*/
    animation-duration: 600s;
}

.tenminute {
    /*60 times .minute*/
    animation-duration: 3600s;
}

.hour {
    /*60 times .minute*/
    animation-duration: 36000s;
}

.tenhour {
    /*10 times .hour*/
    animation-duration: 360000s;
}

/*------------------------------------------------------------*\
1、动画的逻辑就是给数字使用了绝对定位，改变“top”的属性值；
2、分 和 秒 应该是 '60' 而不是 '100'，因此需要创建两个动画；
3、十步十个数字
4、六步六个数字
\*-------------------------------------------------------------*/
@-webkit-keyframes moveten {
    0% {
        top: 0;
    }

    100% {
        top: -400px;
    }
}

@-webkit-keyframes movesix {
    0% {
        top: 0;
    }

    100% {
        top: -240px;
    }
}

/*Lets use a better font for the numbers*/
@font-face {
    font-family: 'digital';
    src: url('./timer.TTF');
}