纯CSS实现的方形秒表

Pure CSS StopWatch

css3, watch

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2947
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #f0f0f0;
    color: #FFF;
    font-family: "Open Sans", sans-serif;
}
.canvas {
    width: 400px;
    height: 400px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    background: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.canvas>.center {
    position: absolute;
    background: linear-gradient(to bottom left, rgb(101, 148, 255) 80%, rgba(101, 48, 255, 0) 80%, rgba(255, 255, 255, 0) 82%, rgb(65, 65, 65) 82%);
    width: 350px;
    height: 350px;
    top: 50%;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    left: 50%;
    margin: -175px 0 0 -175px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.canvas>.center>.clock {
    border: 7px solid rgb(65, 65, 65);
    position: absolute;
    border-radius: 3px;
    align-self: center;
    padding: 15px 40px;
    display: flex;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
}
.canvas>.center>.clock>.dots {
    font-size: 2em;
    font-weight: 900;
    margin-top: -2px;
}
.canvas>.center>.clock>.hours:after,
.canvas>.center>.clock>.hours:before,
.canvas>.center>.clock>.minutes:before,
.canvas>.center>.clock>.minutes:after,
.canvas>.center>.clock>.hours:before,
.canvas>.center>.clock>.seconds:after,
.canvas>.center>.clock>.seconds:before {
    content: '0';
    font-size: 2em;
    font-weight: 900;
    -webkit-animation: var(--name) var(--duration) steps(1) infinite;
    animation: var(--name) var(--duration) steps(1) infinite;
}
.canvas>.center>.clock>.hours:after {
    --name: right;
    --duration: 2160000s;
}
.canvas>.center>.clock>.hours:before {
    --name: left;
    --duration: 21600000s;
}
.canvas>.center>.clock>.minutes:after {
    --name: right;
    --duration: 600s;
}
.canvas>.center>.clock>.minutes:before {
    --name: left;
    --duration: 3600s;
}
.canvas>.center>.clock>.seconds:after {
    --name: right;
    --duration: 10s;
}
.canvas>.center>.clock>.seconds:before {
    --name: left;
    --duration: 60s;
}
@-webkit-keyframes right {
    0% {
        content: '0';
    }
    10% {
        content: '1';
    }
    20% {
        content: '2';
    }
    30% {
        content: '3';
    }
    40% {
        content: '4';
    }
    50% {
        content: '5';
    }
    60% {
        content: '6';
    }
    70% {
        content: '7';
    }
    80% {
        content: '8';
    }
    90% {
        content: '9';
    }
}
@keyframes right {
    0% {
        content: '0';
    }
    10% {
        content: '1';
    }
    20% {
        content: '2';
    }
    30% {
        content: '3';
    }
    40% {
        content: '4';
    }
    50% {
        content: '5';
    }
    60% {
        content: '6';
    }
    70% {
        content: '7';
    }
    80% {
        content: '8';
    }
    90% {
        content: '9';
    }
}
@-webkit-keyframes left {
    0% {
        content: '0';
    }
    16.666666666666668% {
        content: '1';
    }
    33.333333333333336% {
        content: '2';
    }
    50% {
        content: '3';
    }
    66.66666666666667% {
        content: '4';
    }
    83.33333333333334% {
        content: '5';
    }
}
@keyframes left {
    0% {
        content: '0';
    }
    16.666666666666668% {
        content: '1';
    }
    33.333333333333336% {
        content: '2';
    }
    50% {
        content: '3';
    }
    66.66666666666667% {
        content: '4';
    }
    83.33333333333334% {
        content: '5';
    }
}
#switch,
#reset {
    display: none;
}
.canvas>.center>.pause-play-icon {
    color: #414141;
    position: absolute;
    border: 5px solid;
    border-radius: 50%;
    left: 35%;
    bottom: 22%;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
.canvas>.center>.reset-icon {
    color: #414141;
    position: absolute;
    border: 5px solid;
    border-radius: 50%;
    right: 35%;
    bottom: 22%;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
.canvas>.center>.reset-icon:before {
    content: '';
    color: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6.5px;
    margin-top: -6.5px;
    border: 7px solid;
    transition: opacity 1.5s;
    opacity: 1;
}
.canvas>.center>.pause-play-icon:hover,
.canvas>.center>.reset-icon:hover {
    color: rgb(77, 77, 77);
}
.canvas>.center>.pause-play-icon:active,
.canvas>.center>.reset-icon:active {
    color: rgb(40, 40, 40);
}
.canvas>.center>.pause-play-icon:before {
    content: '';
    color: inherit;
    position: absolute;
    height: 13px;
    width: 10px;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -6.5px;
    border: 4px solid;
    border-top: none;
    border-bottom: none;
    transition: opacity 1.5s;
    opacity: 1;
}
.canvas>.center>.pause-play-icon:after {
    content: '';
    color: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -2.5px;
    -webkit-transform: scale(0);
    transform: scale(0);
    border: 10px solid;
    border-top-color: rgba(0, 0, 0, 0);
    border-right-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, 0);
    transition: opacity 1.5s;
    opacity: 0;
}
#switch:checked ~ .pause-play-icon:before {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
#switch:checked ~ .pause-play-icon:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
#switch:checked ~ .clock>.hours:before,
#switch:checked ~ .clock>.hours:after,
#switch:checked ~ .clock>.minutes:before,
#switch:checked ~ .clock>.minutes:after,
#switch:checked ~ .clock>.seconds:before,
#switch:checked ~ .clock>.seconds:after {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
#reset:checked ~ .clock>.hours:after {
    --name: reset-right;
    --duration: 2160000s;
}
#reset:checked ~ .clock>.hours:before {
    --name: reset-left;
    --duration: 21600000s;
}
#reset:checked ~ .clock>.minutes:after {
    --name: reset-right;
    --duration: 600s;
}
#reset:checked ~ .clock>.minutes:before {
    --name: reset-left;
    --duration: 3600s;
}
#reset:checked ~ .clock>.seconds:after {
    --name: reset-right;
    --duration: 10s;
}
#reset:checked ~ .clock>.seconds:before {
    --name: reset-left;
    --duration: 60s;
}
@-webkit-keyframes reset-right {
    0% {
        content: '0';
    }
    10% {
        content: '1';
    }
    20% {
        content: '2';
    }
    30% {
        content: '3';
    }
    40% {
        content: '4';
    }
    50% {
        content: '5';
    }
    60% {
        content: '6';
    }
    70% {
        content: '7';
    }
    80% {
        content: '8';
    }
    90% {
        content: '9';
    }
}
@keyframes reset-right {
    0% {
        content: '0';
    }
    10% {
        content: '1';
    }
    20% {
        content: '2';
    }
    30% {
        content: '3';
    }
    40% {
        content: '4';
    }
    50% {
        content: '5';
    }
    60% {
        content: '6';
    }
    70% {
        content: '7';
    }
    80% {
        content: '8';
    }
    90% {
        content: '9';
    }
}
@-webkit-keyframes reset-left {
    0% {
        content: '0';
    }
    16.666666666666668% {
        content: '1';
    }
    33.333333333333336% {
        content: '2';
    }
    50% {
        content: '3';
    }
    66.66666666666667% {
        content: '4';
    }
    83.33333333333334% {
        content: '5';
    }
}
@keyframes reset-left {
    0% {
        content: '0';
    }
    16.666666666666668% {
        content: '1';
    }
    33.333333333333336% {
        content: '2';
    }
    50% {
        content: '3';
    }
    66.66666666666667% {
        content: '4';
    }
    83.33333333333334% {
        content: '5';
    }
}

HTML

Pure CSS StopWatch

css3, watch

编辑器支持Emmet

快捷键

Pure CSS StopWatch

css3, watch

纯CSS实现雨滴形状的数字序号列表

一款实用的纯CSS实现方向敏感悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：