<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#watch {
width: 540px;
height: 540px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.shell {
width: 500px;
height: 500px;
border-width: 20px;
border-color: transparent #d2d8df #d2d8df;
border-style: solid;
border-radius: 50%;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
animation: rot1 0.8s 0.5s linear forwards;
animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
}
@keyframes rot1 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(315deg);
}
}
.dial {
width: 434px;
height: 434px;
border: 18px solid #373F4A;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.internal {
width: 436px;
height: 436px;
background-color: #262C33;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.internal ul {
width: 420px;
height: 420px;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.internal ul li {
width: 420px;
height: 420px;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0;
}
.internal ul li:before {
content: "";
display: inline-block;
width: 10px;
height: 30px;
background-color: #D3D4D5;
border-radius: 10px;
position: absolute;
top: 0px;
left: calc(50% - 5px);
}
.internal ul li:after {
content: "";
display: inline-block;
width: 10px;
height: 30px;
background-color: #D3D4D5;
border-radius: 10px;
position: absolute;
bottom: 0px;
left: calc(50% - 5px);
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.internal ul li:nth-child(1) {
transform: rotate(30deg);
animation: show 0.4s 250ms linear forwards;
}
.internal ul li:nth-child(2) {
transform: rotate(60deg);
animation: show 0.4s 500ms linear forwards;
}
.internal ul li:nth-child(3) {
transform: rotate(90deg);
animation: show 0.4s 750ms linear forwards;
}
.internal ul li:nth-child(4) {
transform: rotate(120deg);
animation: show 0.4s 1000ms linear forwards;
}
.internal ul li:nth-child(5) {
transform: rotate(150deg);
animation: show 0.4s 1250ms linear forwards;
}
.internal ul li:nth-child(6) {
transform: rotate(180deg);
animation: show 0.4s linear forwards;
}
.internal ul li span {
display: block;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.internal ul li span:before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
background-color: #D3D4D5;
border-radius: 50%;
position: absolute;
bottom: 0px;
left: calc(50% - 5px);
}
.internal ul li span:nth-child(1) {
transform: rotate(6deg);
}
.internal ul li span:nth-child(2) {
transform: rotate(12deg);
}
.internal ul li span:nth-child(3) {
transform: rotate(18deg);
}
.internal ul li span:nth-child(4) {
transform: rotate(24deg);
}
.internal ul li span:nth-child(5) {
transform: rotate(186deg);
}
.internal ul li span:nth-child(6) {
transform: rotate(192deg);
}
.internal ul li span:nth-child(7) {
transform: rotate(198deg);
}
.internal ul li span:nth-child(8) {
transform: rotate(204deg);
}
.internal ul li:nth-child(6) span:nth-child(1) {
animation: show 0.4s 50ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(5) {
animation: show 0.4s 50ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(2) {
animation: show 0.4s 100ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(6) {
animation: show 0.4s 100ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(3) {
animation: show 0.4s 150ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(7) {
animation: show 0.4s 150ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(4) {
animation: show 0.4s 200ms linear forwards;
}
.internal ul li:nth-child(6) span:nth-child(8) {
animation: show 0.4s 200ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(1) {
animation: show 0.4s 300ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(5) {
animation: show 0.4s 300ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(2) {
animation: show 0.4s 350ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(6) {
animation: show 0.4s 350ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(3) {
animation: show 0.4s 400ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(7) {
animation: show 0.4s 400ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(4) {
animation: show 0.4s 450ms linear forwards;
}
.internal ul li:nth-child(1) span:nth-child(8) {
animation: show 0.4s 450ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(1) {
animation: show 0.4s 550ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(5) {
animation: show 0.4s 550ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(2) {
animation: show 0.4s 600ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(6) {
animation: show 0.4s 600ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(3) {
animation: show 0.4s 650ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(7) {
animation: show 0.4s 650ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(4) {
animation: show 0.4s 700ms linear forwards;
}
.internal ul li:nth-child(2) span:nth-child(8) {
animation: show 0.4s 700ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(1) {
animation: show 0.4s 800ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(5) {
animation: show 0.4s 800ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(2) {
animation: show 0.4s 850ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(6) {
animation: show 0.4s 850ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(3) {
animation: show 0.4s 900ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(7) {
animation: show 0.4s 900ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(4) {
animation: show 0.4s 950ms linear forwards;
}
.internal ul li:nth-child(3) span:nth-child(8) {
animation: show 0.4s 950ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(1) {
animation: show 0.4s 1050ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(5) {
animation: show 0.4s 1050ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(2) {
animation: show 0.4s 1100ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(6) {
animation: show 0.4s 1100ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(3) {
animation: show 0.4s 1150ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(7) {
animation: show 0.4s 1150ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(4) {
animation: show 0.4s 1200ms linear forwards;
}
.internal ul li:nth-child(4) span:nth-child(8) {
animation: show 0.4s 1200ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(1) {
animation: show 0.4s 1300ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(5) {
animation: show 0.4s 1300ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(2) {
animation: show 0.4s 1350ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(6) {
animation: show 0.4s 1350ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(3) {
animation: show 0.4s 1400ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(7) {
animation: show 0.4s 1400ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(4) {
animation: show 0.4s 1450ms linear forwards;
}
.internal ul li:nth-child(5) span:nth-child(8) {
animation: show 0.4s 1450ms linear forwards;
}
.hour,
.minute,
.second {
width: 420px;
height: 420px;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.tip1 {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
top: 16px;
left: 203px;
animation: run1 0.8s 2300ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
transform: translateY(180px);
}
@keyframes run1 {
0% {
transform: translateY(180px);
}
100% {
transform: translateY(0px);
}
}
.pointer1 {
background-color: #fff;
width: 14px;
height: 0px;
position: absolute;
bottom: 50%;
left: 203px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
animation: long1 0.8s 2300ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
}
@keyframes long1 {
0% {
height: 0px;
}
100% {
height: 180px;
}
}
.tip2 {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
top: 66px;
left: 200px;
animation: run2 0.8s 1500ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
transform: translateY(130px);
}
@keyframes run2 {
0% {
transform: translateY(130px);
}
100% {
transform: translateY(0px);
}
}
.pointer2 {
background-color: #fff;
width: 20px;
height: 0px;
position: absolute;
bottom: 50%;
left: 200px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
animation: long2 0.8s 1500ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
}
@keyframes long2 {
0% {
height: 0px;
}
100% {
height: 130px;
}
}
.pointer3-top {
width: 10px;
height: 0px;
position: absolute;
border-radius: 5px;
background-color: #f16b41;
bottom: 50%;
left: 205px;
animation: long3 0.8s 3100ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
}
@keyframes long3 {
0% {
height: 0px;
}
100% {
height: 190px;
}
}
.pointer3-bottom {
width: 10px;
height: 0px;
position: absolute;
border-radius: 5px;
background-color: #f16b41;
top: 50%;
left: 205px;
animation: long4 0.8s 3100ms cubic-bezier(0.69, -0.06, 0.49, 1.4) forwards;
}
@keyframes long4 {
0% {
height: 0px;
}
100% {
height: 70px;
}
}
.circle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 50%;
background-color: #f16b41;
}
.second {
animation: beat 60s 3900ms linear infinite forwards;
transition: 0.4s;
transition-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
@keyframes beat {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
1.67% {
transform: rotate(6deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
3.34% {
transform: rotate(12deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
5.01% {
transform: rotate(18deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
6.68% {
transform: rotate(24deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
8.35% {
transform: rotate(30deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
10.2% {
transform: rotate(36deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
11.69% {
transform: rotate(42deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
13.36% {
transform: rotate(48deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
15.03% {
transform: rotate(54deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
16.70% {
transform: rotate(60deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
18.37% {
transform: rotate(66deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
20.04% {
transform: rotate(72deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
21.71% {
transform: rotate(78deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
23.38% {
transform: rotate(84deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
25.05% {
transform: rotate(90deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
26.72% {
transform: rotate(96deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
28.39% {
transform: rotate(102deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
30.06% {
transform: rotate(108deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
31.73% {
transform: rotate(114deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
33.40% {
transform: rotate(120deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
35.07% {
transform: rotate(126deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
36.74% {
transform: rotate(132deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
38.41% {
transform: rotate(138deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
40.08% {
transform: rotate(144deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
41.75% {
transform: rotate(150deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
43.42% {
transform: rotate(156deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
45.09% {
transform: rotate(162deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
46.76% {
transform: rotate(168deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
48.43% {
transform: rotate(174deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
50.1% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
51.77% {
transform: rotate(186deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
53.44% {
transform: rotate(192deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
55.11% {
transform: rotate(198deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
56.78% {
transform: rotate(204deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
58.45% {
transform: rotate(210deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
60.12% {
transform: rotate(216deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
61.79% {
transform: rotate(222deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
63.46% {
transform: rotate(228deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
65.13% {
transform: rotate(234deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
66.80% {
transform: rotate(240deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
68.47% {
transform: rotate(246deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
70.14% {
transform: rotate(252deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
71.81% {
transform: rotate(258deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
73.48% {
transform: rotate(264deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
75.15% {
transform: rotate(270deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
76.82% {
transform: rotate(276deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
78.49% {
transform: rotate(282deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
80.16% {
transform: rotate(288deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
81.83% {
transform: rotate(294deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
83.50% {
transform: rotate(300deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
85.17% {
transform: rotate(306deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
86.84% {
transform: rotate(312deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
88.51% {
transform: rotate(318deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
90.18% {
transform: rotate(324deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
91.85% {
transform: rotate(330deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
93.52% {
transform: rotate(336deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
95.19% {
transform: rotate(342deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
96.86% {
transform: rotate(348deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
98.53% {
transform: rotate(354deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
100% {
transform: rotate(360deg);
animation-timing-function: cubic-bezier(0, 1.95, 1, 0.65);
}
}
</style>
</head>
<body>
<div id="watch">
<div class="shell"></div>
<div class="dial">
<div class="internal">
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<div class="minute">
<div class="tip1"></div>
<div class="pointer1"></div>
</div>
<div class="hour">
<div class="tip2"></div>
<div class="pointer2"></div>
</div>
<div class="second">
<div class="pointer3-top"></div>
<div class="circle"></div>
<div class="pointer3-bottom"></div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>