Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
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
0 1 2 3 4 5 6 7 8 9
:
0 1 2 3 4 5
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
css
@import url(https://fonts.googleapis.com/css?family=Abel); body, html { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; } body { background-color: #2e3c49; background-image: linear-gradient( to bottom, rgba(61, 79, 95, 1) 0%, rgba(27, 36, 45, 1) 100% ); -webkit-perspective: 1000; } body * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; -webkit-user-select: none; } a { color: #293642; background: #fff; font-weight: bold; text-decoration: none; padding: 2px 4px; border-radius: 3px; margin: 3px; } input[name=controls], input[name=color] { display: none; position: absolute; } table, td, tr, th { height: 100%; vertical-align: middle; width: 100%; } td { text-align: center; vertical-align: middle; } /*animations*/ @-webkit-keyframes start_haptic { from { -webkit-transform: scale(.98); } to { } } @-webkit-keyframes stop_haptic { from { -webkit-transform: scale(.98); } to { } } @-webkit-keyframes reset_haptic { from { -webkit-transform: scale(.98); } to { } } @-webkit-keyframes launch { from { -webkit-transform: scale(1.2); opacity: 0; } to { } } @-webkit-keyframes info { from { -webkit-transform: scale(.8) translateY(100px); opacity: 0; } to { } } @-webkit-keyframes menu { from { -webkit-transform: scale(.9) translateY(-50px); opacity: 0; } to { } } @-webkit-keyframes reset { from { -webkit-transform: rotateZ(180deg); } 60% { -webkit-transform: rotateZ(-30deg); } 70% { -webkit-transform: rotateZ(10deg); } 80% { -webkit-transform: rotateZ(-10deg); } to { -webkit-transform: rotateZ(0); } } @-webkit-keyframes arrow { from { -webkit-transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); } } @-webkit-keyframes sec { from { top: 0px; } to { top: -300px; } } @-webkit-keyframes sec1 { from { top: 0px; } to { top: -180px; } } /*settings*/ .green:checked ~ .stopwatch .container .arrow { background-image: url("data:image/svg+xml;utf8,
"); } .orange:checked ~ .stopwatch .container .arrow { background-image: url("data:image/svg+xml;utf8,
"); } .orange:checked ~ .stopwatch .container { background-color: transparent; background-image: url("data:image/svg+xml;utf8,
"); } /*stopwatch*/ .stopwatch { -webkit-animation: launch ease-out .3s; -webkit-animation-fill-mode: forwards; height: 370px; width: 270px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transition: .15s; } .container { background-position: center center; background-repeat: no-repeat; height: 240px; width: 240px; background-color: #fff; border-radius: 240px; border: 15px #293742 solid; transition: -webkit-transform .15s; background-image: url("data:image/svg+xml;utf8,
"); } .arrow_cont { -webkit-animation: reset .4s; -webkit-animation-fill-mode: forwards; } .arrow { transition: background-image .15s; -webkit-animation: arrow steps(360) 60s infinite; -webkit-animation-play-state: paused; height: 240px; width: 240px; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; z-index: 1; position: relative; } /*digits*/ .digit_contianer { width: 180px; height: 30px; margin: 40px auto 20px auto; opacity: .25; } .space { height: 30px; width: 15px; float: left; font-family: digit; font-size: 14px; color: #fff; line-height: 30px; position: relative; text-align: center; } .animcont { height: 30px; width: 13px; overflow: hidden; float: left; margin: 0 1px; } .hours, .min, .min1, .sec, .mil, .sec1, .mil1, .mil0 { font-family: Abel; width: 13px; font-size: 24px; color: #fff; line-height: 30px; position: relative; text-align: center; } .hours { } .min { -webkit-animation: sec steps(10) 600s infinite; -webkit-animation-play-state: paused; } .min1 { -webkit-animation: sec1 steps(6) 3600s infinite; -webkit-animation-play-state: paused; } .sec { -webkit-animation: sec steps(10) 10s infinite; -webkit-animation-play-state: paused; } .sec1 { -webkit-animation: sec1 steps(6) 60s infinite; -webkit-animation-play-state: paused; } .mil { -webkit-animation: sec steps(10) .01s infinite; -webkit-animation-play-state: paused; } .mil1 { -webkit-animation: sec steps(10) .1s infinite; -webkit-animation-play-state: paused; } .mil0 { -webkit-animation: sec steps(10) 1s infinite; -webkit-animation-play-state: paused; } .start:checked ~ .container .mil0 { -webkit-animation-play-state: running; } .stop:checked ~ .container .mil0 { -webkit-animation-play-state: paused; } .start:checked ~ .container .mil { -webkit-animation-play-state: running; } .stop:checked ~ .container .mil { -webkit-animation-play-state: paused; } .start:checked ~ .container .mil1 { -webkit-animation-play-state: running; } .stop:checked ~ .container .mil1 { -webkit-animation-play-state: paused; } .reset:checked ~ .container .mil1 { -webkit-animation: none; top: 0; transition: .2s; } .reset:checked ~ .container .mil0 { -webkit-animation: none; top: 0; transition: .2s; } .reset:checked ~ .container .mil { -webkit-animation: none; top: 0; transition: .2s; } .start:checked ~ .container .sec { -webkit-animation-play-state: running; } .stop:checked ~ .container .sec { -webkit-animation-play-state: paused; } .reset:checked ~ .container .sec { -webkit-animation: none; top: 0; transition: .2s; } .start:checked ~ .container .sec1 { -webkit-animation-play-state: running; } .stop:checked ~ .container .sec1 { -webkit-animation-play-state: paused; } .reset:checked ~ .container .sec1 { -webkit-animation: none; top: 0; transition: .2s; } .start:checked ~ .container .min { -webkit-animation-play-state: running; } .stop:checked ~ .container .min { -webkit-animation-play-state: paused; } .reset:checked ~ .container .min { -webkit-animation: none; top: 0; transition: .2s; } .start:checked ~ .container .min1 { -webkit-animation-play-state: running; } .stop:checked ~ .container .min1 { -webkit-animation-play-state: paused; } .reset:checked ~ .container .min1 { -webkit-animation: none; top: 0; transition: .2s; } .start:checked ~ .container .arrow { -webkit-animation-play-state: running; } .stop:checked ~ .container .arrow { -webkit-animation-play-state: paused; } .reset:checked ~ .container .arrow { -webkit-animation: reset .4s; -webkit-animation-fill-mode: forwards; } .controls { height: 60px; width: 200px; margin: 0 auto; position: relative; } .stop_, .start_ { position: absolute; z-index: 3; height: 60px; width: 80px; left: 60px; transition: .2s; background-position: center center; background-repeat: no-repeat; } .start_ { background-image: url("data:image/svg+xml;utf8,
"); } .stop_ { opacity: 0; -webkit-transform: scale(2); background-image: url("data:image/svg+xml;utf8,
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号