jquery实现秒表计时表交互效果
代码语言:html
所属分类:其他
代码描述:jquery实现秒表计时表交互效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css">
<link href='https://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<style>
html, body {
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 16%, #219eb0 32%, #3f679d 88%);
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
}
.container {
width: 320px;
height: 320px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%, #0c3d69), color-stop(95%, #116c97));
background: linear-gradient(to bottom, #0c3d69 16%, #116c97 95%);
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.5);
border-radius: 8px;
overflow: hidden;
}
.icons {
position: absolute;
width: 48px;
height: 48px;
text-align: center;
cursor: pointer;
top: 4px;
left: 8px;
}
.icons .stop-watch {
display: block;
width: 24px;
height: 24px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: -10px auto 0;
border: 2px solid #f8f8f8;
border-radius: 24px;
}
.icons .stop-watch::before {
content: "";
display: block;
width: 10px;
height: 2px;
background: #f8f8f8;
position: absolute;
top: -6px;
right: 0;
left: 0;
margin: 0 auto;
-webkit-transform: top 0.2s;
transform: top 0.2s;
}
.icons .stop-watch::after {
content: "";
display: block;
width: 2px;
height: 4px;
background: #f8f8f8;
position: absolute;
top: -3px;
right: -3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.icons .stop-watch.sw-click::before {
top: -3px;
}
.icons .stop-watch .sw-parts {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 4px;
height: 4px;
border-radius: 4px;
background: #F8f8f8;
}
.icons .stop-watch .sw-parts .sw-parts2 {
display: block;
width: 2px;
height: 9px;
background: #f8f8f8;
position: absolute;
top: 2px;
left: 1px;
}
.icons .stop-watch .sw-parts #icn-clock-line {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.icons .label {
color: #FFF;
text-align: center;
position: absolute;
bottom: -1rem;
left: 0;
right: 0;
margin: auto;
font-size: 0.75rem;
font-family: 'Share Tech Mono',sans-serif;
}
.clock p {
position: absolute;
color: #FFF;
text-align: center;
top: 144px;
left: 0;
right: 0;
margin: 0 auto;
font-family: 'Share Tech Mono',sans-serif;
font-size: 2rem;
font-weight: 300;
}
.clockline li {
width: 1px;
height: 20px;
border-radius: 2px;
background: #f8f8f8;
position: absolute;
left: 160px;
top: 160px;
}
.clockline li:nth-child(1) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(111.77899px, 7.03254px) rotate(453.6deg);
transform: translate(111.77899px, 7.03254px) rotate(453.6deg);
}
.clockline li:nth-child(2) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(111.11685px, 14.03732px) rotate(457.2deg);
transform: translate(111.11685px, 14.03732px) rotate(457.2deg);
}
.clockline li:nth-child(3) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(110.01617px, 20.98671px) rotate(460.8deg);
transform: translate(110.01617px, 20.98671px) rotate(460.8deg);
}
.clockline li:nth-child(4) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(108.48131px, 27.85327px) rotate(464.4deg);
transform: translate(108.48131px, 27.85327px) rotate(464.4deg);
}
.clockline li:nth-child(5) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(106.51833px, 34.6099px) rotate(468deg);
transform: translate(106.51833px, 34.6099px) rotate(468deg);
height: 32px;
}
.clockline li:nth-child(6) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(104.13497px, 41.22995px) rotate(471.6deg);
transform: translate(104.13497px, 41.22995px) rotate(471.6deg);
}
.clockline li:nth-child(7) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(101.34063px, 47.68728px) rotate(475.2deg);
transform: translate(101.34063px, 47.68728px) rotate(475.2deg);
}
.clockline li:nth-child(8) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(98.14635px, 53.95641px) rotate(478.8deg);
transform: translate(98.14635px, 53.95641px) rotate(478.8deg);
}
.clockline li:nth-child(9) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(94.56473px, 60.0126px) rotate(482.4deg);
transform: translate(94.56473px, 60.0126px) rotate(482.4deg);
}
.clockline li:nth-child(10) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(90.6099px, 65.83195px) rotate(486deg);
transform: translate(90.6099px, 65.83195px) rotate(486deg);
height: 32px;
}
.clockline li:nth-child(11) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(86.29748px, 71.39149px) rotate(489.6deg);
transform: translate(86.29748px, 71.39149px) rotate(489.6deg);
}
.clockline li:nth-child(12) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(81.64449px, 76.66928px) rotate(493.2deg);
transform: translate(81.64449px, 76.66928px) rotate(493.2deg);
}
.clockline li:nth-child(13) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(76.66928px, 81.64449px) rotate(496.8deg);
transform: translate(76.66928px, 81.64449px) rotate(496.8deg);
}
.clockline li:nth-child(14) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(71.39149px, 86.29748px) rotate(500.4deg);
transform: translate(71.39149px, 86.29748px) rotate(500.4deg);
}
.clockline li:nth-child(15) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(65.83195px, 90.6099px) rotate(504deg);
transform: translate(65.83195px, 90.6099px) rotate(504deg);
height: 32px;
}
.clockline li:nth-child(16) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(60.0126px, 94.56473px) rotate(507.6deg);
transform: translate(60.0126px, 94.56473px) rotate(507.6deg);
}
.clockline li:nth-child(17) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(53.95641px, 98.14635px) rotate(511.2deg);
transform: translate(53.95641px, 98.14635px) rotate(511.2deg);
}
.clockline li:nth-child(18) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(47.68728px, 101.34063px) rotate(514.8deg);
transform: translate(47.68728px, 101.34063px) rotate(514.8deg);
}
.clockline li:nth-child(19) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(41.22995px, 104.13497px) rotate(518.4deg);
transform: translate(41.22995px, 104.13497px) rotate(518.4deg);
}
.clockline li:nth-child(20) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(34.6099px, 106.51833px) rotate(522deg);
transform: translate(34.6099px, 106.51833px) rotate(522deg);
height: 32px;
}
.clockline li:nth-child(21) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(27.85327px, 108.48131px) rotate(525.6deg);
transform: translate(27.85327px, 108.48131px) rotate(525.6deg);
}
.clockline li:nth-child(22) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(20.98671px, 110.01617px) rotate(529.2deg);
transform: translate(20.98671px, 110.01617px) rotate(529.2deg);
}
.clockline li:nth-child(23) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(14.03732px, 111.11685px) rotate(532.8deg);
transform: translate(14.03732px, 111.11685px) rotate(532.8deg);
}
.clockline li:nth-child(24) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(7.03254px, 111.77899px) rotate(536.4deg);
transform: translate(7.03254px, 111.77899px) rotate(536.4deg);
}
.clockline li:nth-child(25) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(0px, 112px) rotate(540deg);
transform: translate(0px, 112px) rotate(540deg);
height: 32px;
}
.clockline li:nth-child(26) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-7.03254px, 111.77899px) rotate(543.6deg);
transform: translate(-7.03254px, 111.77899px) rotate(543.6deg);
}
.clockline li:nth-child(27) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-14.03732px, 111.11685px) rotate(547.2deg);
transform: translate(-14.03732px, 111.11685px) rotate(547.2deg);
}
.clockline li:nth-child(28) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-20.98671px, 110.01617px) rotate(550.8deg);
transform: translate(-20.98671px, 110.01617px) rotate(550.8deg);
}
.clockline li:nth-child(29) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-27.85327px, 108.48131px) rotate(554.4deg);
transform: translate(-27.85327px, 108.48131px) rotate(554.4deg);
}
.clockline li:nth-child(30) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-34.6099px, 106.51833px) rotate(558deg);
transform: translate(-34.6099px, 106.51833px) rotate(558deg);
height: 32px;
}
.clockline li:nth-child(31) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-41.22995px, 104.13497px) rotate(561.6deg);
transform: translate(-41.22995px, 104.13497px) rotate(561.6deg);
}
.clockline li:nth-child(32) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-47.68728px, 101.34063px) rotate(565.2deg);
transform: translate(-47.68728px, 101.34063px) rotate(565.2deg);
}
.clockline li:nth-child(33) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-53.95641px, 98.14635px) rotate(568.8deg);
transform: translate(-53.95641px, 98.14635px) rotate(568.8deg);
}
.clockline li:nth-child(34) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-60.0126px, 94.56473px) rotate(572.4deg);
transform: translate(-60.0126px, 94.56473px) rotate(572.4deg);
}
.clockline li:nth-child(35) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-65.83195px, 90.6099px) rotate(576deg);
transform: translate(-65.83195px, 90.6099px) rotate(576deg);
height: 32px;
}
.clockline li:nth-child(36) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-71.39149px, 86.29748px) rotate(579.6deg);
transform: translate(-71.39149px, 86.29748px) rotate(579.6deg);
}
.clockline li:nth-child(37) {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate(-76.66928px, 81.64.........完整代码请登录后点击上方下载按钮下载查看
网友评论0