Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Stop
Start
Reset
Lap
Lap
Lap
Lap
css
html, body { padding: 0; margin: 0; background-color: #0F0F0F; } * { box-sizing: border-box; } input, label { display: none; } .container { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; margin: 60px auto 0; width: 90vw; min-width: 300px; max-width: 400px; text-align: center; } time { font-size: 68px; height: 1em; line-height: 1em; display: inline-block; overflow: hidden; animation-name: none; animation-play-state: paused; margin-bottom: 60px; color: #fff; } time i, time b { float: left; font-style: normal; font-weight: 100; animation-name: inherit; animation-play-state: inherit; } .container > time b { height: 1em; min-width: 0.3em; padding-top: 0.3em; } .container > time b::before, .container > time b::after { content: ''; display: block; width: 0.08em; height: 0.08em; background-color: currentColor; border-radius: 100%; margin: 0 auto 0.29em; } time i::before, time i::after { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0'; white-space: pre; animation-name: inherit; animation-play-state: inherit; animation-iteration-count: infinite; animation-timing-function: steps(10); float: left; margin: 0 0.02em; } time i:first-child::before, time i:nth-of-type(2)::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 0'; animation-timing-function: steps(6); } time i:first-child::before { animation-duration: 3600s; } time i:first-child::after { animation-duration: 600s; } time i:nth-of-type(2)::before { animation-duration: 60s; } time i:nth-of-type(2)::after { animation-duration: 10s; } time i:nth-of-type(3)::before { animation-duration: 1s; } time i:nth-of-type(3)::after { animation-duration: 100ms; } .controls { position: relative; height: 80px; margin-bottom: 20px; } .controls::before { display: none; content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 80px; background-color: #0F0F0F; opacity: 0.5; z-index: 10; } label { cursor: pointer; font-size: 16px; border: 2px solid #353535; background-color: #353535; box-shadow: inset 0 0 0 2px #0F0F0F; color: #ccc; width: 80px; border-radius: 100%; text-align: center; line-height: 76px; position: absolute; top: 0; left: 0; } label[for="start"] { background-color: #182E1C; border-color: #182E1C; color: #42CC57; } label[for="stop"] { background-color: #351614; border-color: #351614; color: #FF352C; } label[for="start"], label[for="stop"] { right: 0; left: auto; } .laps { counter-reset: laps; list-style: none; margin: 0; padding-left: 0; border-top: 1px solid #333; font-size: 16px; } .laps li { color: #666; text-align: right; position: relative; border-bottom: 1px solid #333; padding-top: 1em; height: 3em; } .laps li::before { counter-increment: laps; content: 'Lap ' counter(laps); visibility: hidden; color: inherit; line-height: 3em; position: absolute; left: 0; top: 0; } .laps li time { visibility: hidden; color: inherit; font-size: inherit; margin-bottom: 0; } .laps li time i, .laps li time b { font-weight: inherit; padding-top: 0; } .laps li time b::before { content: ':'; } /* Visible control conditions */ #start:checked ~ .controls label[for="stop"], #start:checked ~ #lap_1:not(:checked) ~ .controls label[for="lap_1"], #start:checked ~ #lap_1:checked + #lap_2:not(:checked) ~ .controls label[for="lap_2"], #start:checked ~ #lap_2:checked + #lap_3:not(:checked) ~ .controls label[for="lap_3"], #start:checked ~ #lap_3:checked + #lap_4:not(:checked) ~ .controls label[for="lap_4"], #start:checked ~ #lap_4:checked ~ .controls label[for="lap_4"], #stop:checked ~ .controls label[for="start"], #stop:checked ~ .controls label[for="reset"], #init:checked ~ .controls label[for="start"], #init:checked ~ .controls label[for="lap_1"] { display: block; } /* Disable lap control conditions */ #init:checked ~ .controls::before, #start:checked ~ #lap_4:checked ~ .controls::before { display: block; } /* Visible lap conditions */ .laps li:first-child time, .laps li:first-child::before, #lap_1:checked ~ .laps li:nth-child(2) time, #lap_1:checked ~ .laps li:nth-child(2)::before, #lap_2:checked ~ .laps li:nth-child(3) time, #lap_2:checked ~ .laps li:nth-child(3)::before, #lap_3:checked ~ .laps li:nth-child(4) time, #lap_3:checked ~ .laps li:nth-child(4)::before { visibility: visible; } /* Reset */ #init:checked ~ time, #init:checked ~ .laps li time { animation-name: none; } #init:not(:checked) ~ time, #init:not(:checked) ~ .laps li time { animation-name: digit; } /* Timer / Lap running conditions */ #start:checked ~ time, #start:checked ~ #lap_1:not(:checked) ~ .laps li:first-child time, #start:checked ~:checked + #lap_2:not(:checked) ~ .laps li:nth-child(2) time, #start:checked ~:checked + #lap_3:not(:checked) ~ .laps li:nth-child(3) time, #start:checked ~:checked + #lap_4:not(:checked) ~ .laps li:nth-child(4) time { animation-play-state: running; } /* Timer / Lap stopping conditions */ #stop:checked ~ time, #stop:checked ~ .laps li time, #start:checked ~ #lap_1:checked ~ .laps li:first-child time, #start:checked ~ #lap_2:checked ~ .laps li:nth-child(2) time, #start:checked ~ #lap_3:checked ~ .laps li:nth-child(3) time, #start:checked ~ #lap_4:checked ~ .laps li:nth-child(4) time { color: #fff; animation-play-state: paused; } @keyframes digit { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 1em)); } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS秒表-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号