计时表秒表效果-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：计时表秒表效果

代码标签：

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@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,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='220px' height='220px' viewBox='0 0 220 220' enable-background='new 0 0 220 220' xml:space='preserve'><path  fill='%2395BA20' d='M113,119.541V124v2c0,1.657-1.343,3-3,3c-1.656,0-3-1.343-3-3v-2v-4.459c-4.057-1.273-7-5.063-7-9.541 c0-4.496,2.968-8.299,7.051-9.559L109,3h2l1.949,97.441c4.083,1.26,7.051,5.063,7.051,9.559 C120,114.479,117.057,118.268,113,119.541z M110,103.5c-3.59,0-6.5,2.91-6.5,6.5s2.91,6.5,6.5,6.5s6.5-2.91,6.5-6.5 S113.59,103.5,110,103.5z'/></svg>");
}

.orange:checked ~ .stopwatch .container .arrow
{
background-image:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='220px' height='220px' viewBox='0 0 220 220' enable-background='new 0 0 220 220' xml:space='preserve'><path  fill='%23ffd200' d='M113,119.541V124v2c0,1.657-1.343,3-3,3c-1.656,0-3-1.343-3-3v-2v-4.459c-4.057-1.273-7-5.063-7-9.541 c0-4.496,2.968-8.299,7.051-9.559L109,3h2l1.949,97.441c4.083,1.26,7.051,5.063,7.051,9.559 C120,114.479,117.057,118.268,113,119.541z M110,103.5c-3.59,0-6.5,2.91-6.5,6.5s2.91,6.5,6.5,6.5s6.5-2.91,6.5-6.5 S113.59,103.5,110,103.5z'/></svg>");
}
.orange:checked ~ .stopwatch .container{background-color:transparent;
           background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  version='1.1' x='0px' y='0px' width='220px' height='220px' viewBox='0 0 220 220' enable-background='new 0 0 220 220' xml:space='preserve'><path fill-rule='evenodd' clip-rule='evenodd'  fill='%23ffffff' d='M214.975 111H200v-2h14.975c0.003 0.3 0 0.7 0 1 S214.978 110.7 215 111z M203.968 105.564l10.907-0.493c0.016 0.3 0 0.7 0 0.995l-10.887 0.492L203.968 105.564z M203.564 100.7l10.922-1.063c0.032 0.3 0 0.7 0.1 0.992l-10.899 1.061L203.564 100.7z M202.912 95.902l10.911-1.633 c0.049 0.3 0.1 0.7 0.1 0.987l-10.887 1.629L202.912 95.902z M201.985 91.032l10.876-2.219 c0.065 0.3 0.1 0.7 0.2 0.979l-10.85 2.213L201.985 91.032z M196.675 85.74l14.48-3.88l0 0 c0.179 0.6 0.4 1.3 0.5 1.924l0 0l-14.508 3.888L196.675 85.74z M199.09 80.717l10.649-3.538 c0.104 0.3 0.2 0.6 0.3 0.941L199.4 81.66L199.09 80.717z M197.417 76.057l10.449-4.094c0.12 0.3 0.2 0.6 0.4 0.9 l-10.453 4.095L197.417 76.057z M195.546 71.599l10.228-4.626c0.136 0.3 0.3 0.6 0.4 0.905l-10.229 4.627L195.546 71.599z M193.427 67.209l9.979-5.153c0.151 0.3 0.3 0.6 0.5 0.884l-9.977 5.152L193.427 67.209z M187.442 64.134l12.98-7.494 c0.266 0.4 0.5 0.9 0.8 1.359c0.071 0.1 0.1 0.2 0.2 0.375l-12.978 7.493L187.442 64.134z M188.911 59.2 l9.399-6.009c0.18 0.3 0.4 0.6 0.5 0.837l-9.4 6.009L188.911 59.242z M186.129 55.231l9.108-6.511 c0.193 0.3 0.4 0.5 0.6 0.811l-9.104 6.509L186.129 55.231z M183.165 51.402l8.796-6.999 c0.207 0.3 0.4 0.5 0.6 0.782l-8.789 6.994L183.165 51.402z M179.928 47.647l8.453-7.487 c0.221 0.2 0.4 0.5 0.7 0.752l-8.443 7.478L179.928 47.647z M172.933 45.653l10.59-10.59 c0.476 0.5 0.9 0.9 1.4 1.414l0 0l-10.59 10.59L172.933 45.653z M172.512 39.915l7.364-8.264 c0.249 0.2 0.5 0.4 0.8 0.657l-7.372 8.273L172.512 39.915z M168.704 36.699l6.915-8.642 c0.26 0.2 0.5 0.4 0.8 0.618l-6.92 8.648L168.704 36.699z M164.826 33.757l6.46-8.99c0.271 0.2 0.5 0.4 0.8 0.6 l-6.463 8.994L164.826 33.757z M160.767 30.998l5.984-9.319c0.28 0.2 0.6 0.4 0.8 0.54l-5.984 9.319L160.767 30.998z M154.134 31.558l7.493-12.978c0.393 0.2 0.8 0.4 1.2 0.675c0.186 0.1 0.4 0.2 0.6 0.322l-7.494 13 L154.134 31.558z M151.951 25.824l5.037-9.719c0.298 0.1 0.6 0.3 0.9 0.457l-5.038 9.723L151.951 25.824z M147.508 23.7 l4.515-9.953c0.306 0.1 0.6 0.3 0.9 0.413l-4.515 9.954L147.508 23.725z M142.997 21.874l3.986-10.155 c0.313 0.1 0.6 0.2 0.9 0.367L143.93 22.24L142.997 21.874z M146.951 43.992c0.061 0.1 0.1 0.2 0.1 0.3 s-0.03 0.231-0.091 0.326c-0.06 0.094-0.146 0.141-0.258 0.141h-3.065l-0.195 2.692h1.294c0.845 0 1.5 0.2 2 0.6 c0.505 0.4 0.8 1.1 0.8 1.93v0.233c0 0.91-0.255 1.58-0.763 2.01c-0.51 0.43-1.182 0.646-2.019 0.6 c-0.862 0-1.544-0.207-2.044-0.621c-0.5-0.414-0.75-0.916-0.75-1.505c0-0.328 0.181-0.492 0.543-0.492s0.544 0.1 0.5 0.4 c0 0.4 0.2 0.7 0.5 0.928c0.318 0.2 0.7 0.3 1.2 0.338c0.543 0 0.964-0.143 1.261-0.43 c0.298-0.287 0.446-0.717 0.446-1.291v-0.233c0-0.557-0.148-0.978-0.446-1.26c-0.297-0.283-0.713-0.424-1.248-0.424h-1.837 c-0.336 0-0.504-0.135-0.504-0.405c0-0.082 0.016-0.171 0.049-0.27l0.248-3.443c0.018-0.246 0.112-0.369 0.285-0.369h3.726 C146.805 43.9 146.9 43.9 147 43.992z M138.287 20.224l3.436-10.334c0.319 0.1 0.6 0.2 0.9 0.321l-3.435 10.3 L138.287 20.224z M136.215 211.7l-3.887-14.508l1.932-0.518l3.88 14.48l0 0C137.497 211.3 136.9 211.5 136.2 211.7z M132.328 22.808L136.215 8.3l0 0c0.648 0.2 1.3 0.4 1.9 0.545l0 0l-3.88 14.481L132.328 22.808z M129.069 18 l2.235-10.788c0.327 0.1 0.6 0.2 1 0.225l-2.23 10.766L129.069 17.955z M131.629 212.8 c-0.326 0.068-0.653 0.135-0.981 0.2l-2.212-10.771l0.98-0.202L131.629 212.759z M124.164 17.073l1.659-10.885 c0.33 0.1 0.7 0.1 1 0.167l-1.656 10.868L124.164 17.073z M126.146 213.763c-0.329 0.051-0.663 0.086-0.992 0.1 l-1.633-10.835l0.99-0.149L126.146 213.763z .........完整代码请登录后点击上方下载按钮下载查看