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,
");} .reset_{ height:60px; width:80px; display:none; position:absolute; transition:.2s; right:0;-webkit-animation:info .2s;background-repeat:no-repeat; background-position:center center; background-image:url("data:image/svg+xml;utf8,
");} .reset_::after{ height:60px; width:20px; text-align:center; position:absolu
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号