Ajax Loader
×
HTML
<div id="clock">
1
<div id="clock">
2
  <div id="hand">
3
    <div id="hand-left"></div>
4
    <div id="hand-right"></div>
5
    <div id="hand-botom"></div>
6
    <div id="hand-front"></div>
7
    <div id="hand-shadow"></div>
8
    
9
  </div>
10
  <div id="face">
11
    <div id="face-hour">
12
      <span class="line">|</span>
13
      <span class="line">|</span>
14
      <span class="line">|</span>
15
      <span class="line">|</span>
16
      <span class="line">|</span>
17
      <span class="line">|</span>
18
      <span class="line">|</span>
19
      <span class="line">|</span>
20
      <span class="line">|</span>
21
      <span class="line">|</span>
22
      <span class="line">|</span>
23
      <span class="line">|</span>
24
    </div>
25
    <div id="face-minute">
26
      <span class="line">|</span>
27
      <span class="line">|</span>
28
      <span class="line">|</span>
29
      <span class="line">|</span>
30
      <span class="line">|</span>
31
      <span class="line">|</span>
32
      <span class="line">|</span>
33
      <span class="line">|</span>
34
      <span class="line">|</span>
35
      <span class="line">|</span>
36
      <span class="line">|</span>
37
      <span class="line">|</span>
38
      <span class="line">|</span>
39
      <span class="line">|</span>
40
      <span class="line">|</span>
41
      <span class="line">|</span>
42
      <span class="line">|</span>
43
      <span class="line">|</span>
44
      <span class="line">|</span>
45
      <span class="line">|</span>
46
      <span class="line">|</span>
47
      <span class="line">|</span>
48
      <span class="line">|</span>
49
      <span class="line">|</span>
50
      <span class="line">|</span>
51
      <span class="line">|</span>
52
      <span class="line">|</span>
53
      <span class="line">|</span>
54
      <span class="line">|</span>
55
      <span class="line">|</span>
56
      <span class="line">|</span>
57
      <span class="line">|</span>
58
      <span class="line">|</span>
59
      <span class="line">|</span>
60
      <span class="line">|</span>
61
      <span class="line">|</span>
62
      <span class="line">|</span>
63
      <span class="line">|</span>
64
      <span class="line">|</span>
65
      <span class="line">|</span>
66
      <span class="line">|</span>
67
      <span class="line">|</span>
68
      <span class="line">|</span>
69
      <span class="line">|</span>
70
      <span class="line">|</span>
71
      <span class="line">|</span>
72
      <span class="line">|</span>
73
      <span class="line">|</span>    
74
    </div>
75
  </div>
76
</div>
 
CSS
#clock {
1
#clock {
2
  margin:0 auto;
3
  position: fixed;
4
  width: 1000px;
5
  height: 1000px;
6
  padding: 10px;
7
  background-color: #aaa;
8
  border-radius: 50%;
9
  top: -600px;
10
  left: 50%;
11
  margin-left: -500px;
12
  transform-origin: center center;
13
  transform: perspective(800px) rotate3d(1,0,0,70deg);
14
  transform-style: preserve-3d;
15
  box-shadow: 0 1px 10px rgba(0,0,0,0.7),
16
    inset 0 1px 10px rgba(0,0,0,0.8),
17
    inset 0 -10px 1px rgba(255,255,255,0.6);
18
}
19
#face {
20
  background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(232,232,232,1) 63%,rgba(196,196,196,1) 100%);
21
  width: 100%;
22
  height: 100%;
23
  position: relative;
24
  border-radius: 50%;
25
  animation: go 5s cubic-bezier(.1,0,.52,1.4) infinite;
26
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2),
27
    inset 0 0 3px rgba(0,0,0,0.3);
28
}
29
#hand {
30
  width: 10px;
31
  height: 49%;
32
  background: linear-gradient(to right,  #9e1a16 0%,#bb1a1a 8%,#ea4f20 50%,#bb1a1a 95%,#9e1a16 100%);
33
  position: absolute;
34
  top:0;
35
  left: 50%;
36
  margin-left: -5px;
37
  transform-origin: 50% 100%;
38
  transform: translate3d(0, 0, 15px) rotate(180deg); 
39
  transform-style: preserve-3d;
40
  z-index:1;
41
}
42
#hand-right {
43
  width: 10px;
44
  height: 100%;
45
  left:-10px;
46
  top:0;
47
  background-color: pink;
48
  position: absolute;
49
  transform-origin: 100% 100%;
50
  transform: rotate3d(0,1,0,-90deg);
51
}
52
#hand-left {
53
  width: 10px;
54
  height: 100%;
55
  right:-10px;
56
  top:0;
57
  background-color: orange;
58
  position: absolute;
59
  transform-origin: 0% 0%;
60
  transform: rotate3d(0,1,0,90deg);  
61
}
62
#hand-front {
63
  width: 10px;
64
  height: 10px;
65
  top:-10px; 
66
  background: radial-gradient(ellipse at center,  #9e1a16 0%,#bb1a1a 20%,#ea4f20 50%,#bb1a1a 80%,#9e1a16 100%); /* W3C */
67
  border-radius: 50% 50% 0 0;
68
  position: absolute;
69
  transform-origin: 100% 100%;
70
  transform: rotate3d(1,0,0,90deg);
71
}
72
#hand-shadow {
73
  width: 8px;
74
  height: 100%;
75
  background-color: rgba(0,0,0,0.3);
76
  transform: translate3d(1px, 0, -15px);
77
  opacity: 0.4;
78
  box-shadow: 0 0 2px rgba(0,0,0,0.8);
79
}
80
.line {
81
  transform-origin: 50% 100%;
82
  height:50%;
83
  width: 100%;
84
  position: absolute;
85
  top: 0;
86
  text-align: center;
87
}
88
#face-minute .line {
89
  color: #aaa;
90
  font-size: 1em;
91
}
92
#face-hour .line {
93
  color: #000;
94
  font-size: 1.5em;
95
  font-weight: bold;
96
}
97
 
98
/* face hour */
99
#face-hour .line:nth-child(1) {transform: rotate(30deg);}
100
#face-hour .line:nth-child(2) {transform: rotate(60deg);}
101
#face-hour .line:nth-child(3) {transform: rotate(90deg);}
102
#face-hour .line:nth-child(4) {transform: rotate(120deg);}
103
#face-hour .line:nth-child(5) {transform: rotate(150deg);}
104
#face-hour .line:nth-child(6) {transform: rotate(180deg);}
105
#face-hour .line:nth-child(7) {transform: rotate(210deg);}
106
#face-hour .line:nth-child(8) {transform: rotate(240deg);}
107
#face-hour .line:nth-child(9) {transform: rotate(270deg);}
108
#face-hour .line:nth-child(10) {transform: rotate(300deg);}
109
#face-hour .line:nth-child(11) {transform: rotate(330deg);}
110
#face-hour .line:nth-child(12) {transform: rotate(360deg);}
111
 
112
/* face minute */
113
#face-minute .line:nth-child(1) {transform: rotate(6deg);}
114
#face-minute .line:nth-child(2) {transform: rotate(12deg);}
115
#face-minute .line:nth-child(3) {transform: rotate(18deg);}
116
#face-minute .line:nth-child(4) {transform: rotate(24deg);}
117
 
118
#face-minute .line:nth-child(5) {transform: rotate(36deg);}
119
#face-minute .line:nth-child(6) {transform: rotate(42deg);}
120
#face-minute .line:nth-child(7) {transform: rotate(48deg);}
121
#face-minute .line:nth-child(8) {transform: rotate(54deg);}
122
 
123
#face-minute .line:nth-child(9) {transform: rotate(66deg);}
124
#face-minute .line:nth-child(10) {transform: rotate(72deg);}
125
#face-minute .line:nth-child(11) {transform: rotate(78deg);}
126
#face-minute .line:nth-child(12) {transform: rotate(84deg);}
127
 
128
#face-minute .line:nth-child(13) {transform: rotate(96deg);}
129
#face-minute .line:nth-child(14) {transform: rotate(102deg);}
130
#face-minute .line:nth-child(15) {transform: rotate(108deg);}
131
#face-minute .line:nth-child(16) {transform: rotate(114deg);}
132
 
133
#face-minute .line:nth-child(17) {transform: rotate(126deg);}
134
#face-minute .line:nth-child(18) {transform: rotate(132deg);}
135
#face-minute .line:nth-child(19) {transform: rotate(138deg);}
136
#face-minute .line:nth-child(20) {transform: rotate(144deg);}
137
 
138
#face-minute .line:nth-child(21) {transform: rotate(156deg);}
139
#face-minute .line:nth-child(22) {transform: rotate(162deg);}
140
#face-minute .line:nth-child(23) {transform: rotate(168deg);}
141
#face-minute .line:nth-child(24) {transform: rotate(174deg);}
142
 
143
#face-minute .line:nth-child(25) {transform: rotate(186deg);}
144
#face-minute .line:nth-child(26) {transform: rotate(192deg);}
145
#face-minute .line:nth-child(27) {transform: rotate(198deg);}
146
#face-minute .line:nth-child(28) {transform: rotate(204deg);}
147
 
148
#face-minute .line:nth-child(29) {transform: rotate(216deg);}
149
#face-minute .line:nth-child(30) {transform: rotate(222deg);}
150
#face-minute .line:nth-child(31) {transform: rotate(228deg);}
151
#face-minute .line:nth-child(32) {transform: rotate(234deg);}
152
 
153
#face-minute .line:nth-child(33) {transform: rotate(246deg);}
154
#face-minute .line:nth-child(34) {transform: rotate(252deg);}
155
#face-minute .line:nth-child(35) {transform: rotate(258deg);}
156
#face-minute .line:nth-child(36) {transform: rotate(264deg);}
157
 
158
#face-minute .line:nth-child(37) {transform: rotate(276deg);}
159
#face-minute .line:nth-child(38) {transform: rotate(282deg);}
160
#face-minute .line:nth-child(39) {transform: rotate(288deg);}
161
#face-minute .line:nth-child(40) {transform: rotate(294deg);}
162
 
163
#face-minute .line:nth-child(41) {transform: rotate(306deg);}
164
#face-minute .line:nth-child(42) {transform: rotate(312deg);}
165
#face-minute .line:nth-child(43) {transform: rotate(318deg);}
166
#face-minute .line:nth-child(44) {transform: rotate(324deg);}
167
 
168
#face-minute .line:nth-child(45) {transform: rotate(336deg);}
169
#face-minute .line:nth-child(46) {transform: rotate(342deg);}
170
#face-minute .line:nth-child(47) {transform: rotate(348deg);}
171
#face-minute .line:nth-child(48) {transform: rotate(354deg);}
172
/* #face minute */
173
 
174
@keyframes go {
175
  0%,10% {
176
    transform: rotate(0deg);
177
  }
178
  20%,30% {
179
    transform: rotate(-6deg);
180
  }
181
  40%,50% {
182
    transform: rotate(-12deg);
183
  }
184
  60%,70% {
185
    transform: rotate(-18deg);
186
  }
187
  80%,90% {
188
    transform: rotate(-24deg);
189
  }
190
  100% {
191
    transform: rotate(-30deg);
192
  }
193
}
194
 
 

Perspective CSS Timer

CSSDeck G+