Ajax Loader
×

Untitled

HTML
<!-- Copyright 2013 Nikolai Rassadin <rassadin@gmail.com>
1
<!-- Copyright 2013 Nikolai Rassadin <rassadin@gmail.com>
2
Content is licensed under CC BY-NC-SA 3.0 -->
3
 
4
<!-- Load CSS with current GMT time -->
5
<link href="http://tezla.ru/rassadin/wall-clock-demo/" rel="stylesheet" type="text/css" />
6
 
7
<div id="clock">
8
  <div id="a">
9
    <div id="b">
10
      <div id="c">
11
        <div id="d">
12
          <div id="sh">
13
            <div class="hh">
14
              <div class="h"></div>
15
            </div>
16
            <div class="mm">
17
              <div class="m"></div>
18
              <div class="mr"></div>
19
            </div>
20
            <div class="ss">
21
              <div class="s"></div>
22
            </div>
23
          </div>
24
          <div id="ii">
25
          <b><i></i><i></i><i></i><i></i></b>
26
          <b><i></i><i></i><i></i><i></i></b>
27
          <b><i></i><i></i><i></i><i></i></b>
28
          <b><i></i><i></i><i></i><i></i></b>
29
          <b><i></i><i></i><i></i><i></i></b>
30
          <b><i></i><i></i><i></i><i></i></b>
31
          </div>
32
          <div id="e">
33
            <div id="f">
34
              <u>12<u>1<u>2<u>3</u>4</u>5</u></u>
35
            </div>
36
            <div id="g">
37
              <u><u>11<u>10<u>9</u>8</u>7</u>6</u>
38
            </div>
39
            <div id="q"><a href="" style="position:relative;z-index:1000;color:#222;text-decoration:none;">quartz</a></div>
40
          </div>
41
          <div class="hh">
42
            <div class="h"></div>
43
          </div>
44
          <div class="mm">
45
            <div class="m"></div>
46
            <div class="mr"></div>
47
          </div>
48
          <div class="ss">
49
            <div class="s"></div>
50
            <div class="sr"></div>
51
          </div>
52
          <div id="k"></div>
53
        </div>
54
      </div>
55
    </div>
56
  </div>
57
</div>
 
CSS
<!-- Copyright 2013 Nikolai Rassadin <rassadin@gmail.com>
1
<!-- Copyright 2013 Nikolai Rassadin <rassadin@gmail.com>
2
Content is licensed under CC BY-NC-SA 3.0 -->
3
 
4
/*** Clock rules. Pure CSS ***/
5
#clock {
6
}
7
#a {
8
  width:10.0em;
9
  height:10.0em;
10
  position:relative;
11
  border-radius:5.0em;
12
  background:#ccc;/*ccc*/
13
  box-shadow:
14
    inset 0.05em -0.05em 0 #333, /*ccc*/
15
    inset 0.17em -0.17em 0 #555,
16
    inset -0.03em -0.04em 0 #333, /*999*/
17
    inset -0.03em 0.02em 0 #333, /*ccc*/
18
    inset -0.1em -0.1em 0 #555,
19
    0.1em 0.3em 0.2em rgba(0,0,0,0.3);
20
}
21
#b {
22
  width:9.4em;
23
  height:9.4em;
24
  top:0.3em;
25
  left:0.3em;
26
  position:relative;
27
  border-radius:4.7em;
28
  background:#fff;
29
  box-shadow:
30
    inset 0.04em 0 0 #fff,
31
    inset 0 -0.06em 0 #ddd,
32
    inset 0.16em -0.08em 0 #222,
33
    inset -0.16em 0.08em 0 #222,
34
    inset 0.2em 0.2em 0 #222,
35
    0.06em -0.03em 0 #999, 
36
    -0.1em 0.1em 0 #777,
37
    -0.13em -0.2em 0 #fff,
38
    0.13em 0.2em 0 #222,
39
    0.13em 0.3em 0 #333; /*ccc*/
40
}
41
#c {
42
  width:8.9em;
43
  height:8.9em;
44
  top:0.25em;
45
  left:0.25em; 
46
  position:relative;
47
  border-radius:4.45em;
48
  background:#eed;/*f4f5f6;*/
49
  box-shadow:
50
    inset 0.15em 0.2em 0.05em rgba(0,0,0,0.4),
51
    inset 0.2em 0.4em 0.2em rgba(0,0,0,0.3),
52
    inset 0 0.05em 0.3em rgba(0,0,0,0.1),
53
    -0.16em 0.08em 0 #444,
54
    0.16em -0.08em 0 #444;
55
}
56
#d { width:8.8em;
57
   height:8.8em;
58
   top:0.05em;
59
   left:0.05em;
60
   position:relative;
61
   border-radius:4.4em;
62
}
63
#e { width:8.18em;
64
   height:8.18em;
65
   padding-top:4.09em;
66
   box-sizing: border-box;
67
   -moz-box-sizing: border-box;
68
   -webkit-box-sizing: border-box;
69
   left:0.29em;
70
   top:0.29em;
71
   position:absolute;
72
   border:solid 0.04em rgba(0,0,0,0.5);
73
   border-radius:4.09em;  
74
}
75
#ii {
76
  padding-left:4.34em;
77
  position:absolute;
78
}
79
b, i {
80
  height:8.2em; 
81
  position:absolute;
82
  display:block;
83
}
84
b {
85
  border:solid 0 #222;
86
  border-width:0.3em 0;
87
  width:0.12em;
88
}
89
i {
90
  border:solid 0 rgba(0,0,0,0.5);
91
  border-width:0.3em 0;
92
  width:0.04em;
93
}
94
b>i,i>i {
95
  transform:rotate(6deg) ;
96
  margin-top:-0.3em;
97
}
98
b>b  {
99
  transform:rotate(30deg);
100
  margin-top:-0.3em; }
101
b>i {
102
  left:0.03em;
103
}
104
#f,#g {
105
  font:1.2em/1.0em WallClock, sans-serif;
106
  text-align:center;
107
  width:6.8em;
108
    color:#222;
109
}
110
#g>u>u {  
111
  letter-spacing:0.1em;
112
}
113
#g>u>u>u {
114
  letter-spacing:0;
115
}
116
u {
117
  display:block;
118
  line-height:1em;
119
  text-decoration: none;
120
}
121
u>u>u>u {
122
  margin:0.5em -0.55em;
123
  padding: 0 0.05em;
124
}
125
u>u>u {
126
  margin:0.0em -1.75em;
127
  padding: 0 0.7em;
128
}
129
u>u {
130
  margin:-0.55em 0;
131
  text-align:right;
132
  padding: 0 1.65em;
133
}
134
#f {
135
  margin-top:-3.37em;
136
}
137
#g {
138
  margin-top:-6em;
139
}
140
#g u>u {
141
  text-align:left;
142
}
143
#q { 
144
  font:0.22em/1em Segoe UI,Helvetica,sans-serif;
145
  text-align:center;
146
  margin-top:-11.5em;
147
  color:#555;
148
}
149
.ss, .mm, .hh {
150
  width:8.0em;
151
  height:8.0em;
152
  top:0.4em;
153
  left:0.4em;
154
  position:absolute;
155
}
156
.hh {
157
  transform:rotate(-55deg);
158
}
159
.mm {
160
  transform:rotate(60deg);
161
}
162
.ss {
163
  animation: tick 1s normal infinite steps(25,end);
164
 }
165
@keyframes tick {
166
  0% { transform: rotate(0deg); }
167
  12% { transform:rotate(6deg); }
168
  100% { transform: rotate(6deg); }   
169
}
170
.s {
171
  width:0.1em;
172
  height:4.8em; 
173
  top:0.6em;
174
  left:3.95em;
175
  position:relative; 
176
  background:#a00;
177
  outline: 1px solid transparent; 
178
  animation: a360_10 60s normal infinite steps(60,end); 
179
}
180
.sr {
181
  width:0.3em;
182
  height:0.3em;
183
  background:#a00;
184
  margin:-0.95em 0 0 3.84em;
185
  border-radius:0.15em;
186
}
187
@keyframes a360_10  {
188
  0% { transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
189
  100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
190
}
191
 
192
.m {
193
  height:4.8em;
194
  left:3.89em;
195
  width:0.22em;
196
  position:relative;
197
  background:#222;
198
  border:0 0 3.2em 0;
199
  animation: a36016 3600s normal infinite linear;
200
  outline: 1px solid transparent;
201
}
202
@keyframes a36016 {
203
  0% { transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
204
  100% { transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
205
}
206
 
207
.mr {
208
  width:0.5em;
209
  height:0.5em;
210
  background:#222;
211
  margin:-1.05em 0 0 3.74em;
212
  border-radius:0.25em;
213
}
214
.h { 
215
  width:0.3em;
216
  height:3.4em;
217
  left:3.85em;
218
  position:relative; 
219
  background:#222;
220
  margin-top:1.3em; 
221
  outline: 1px solid transparent;
222
  animation: a36010 43200s normal infinite linear;
223
}
224
#sh {
225
  width:8.0em;
226
  height:8.0em;
227
  top:0.2em;
228
  left:0.1em;
229
  position:absolute;
230
  /*display:none;*/
231
}
232
#sh .s, #sh .m, #sh .h, #sh .mr  {
233
  background:#ddc;
234
  box-shadow:0 0 0.05em #ddc, 0 0 0.025em #ddc;
235
}
236
#k {
237
  width:8.8em;
238
  height:8.8em;
239
  position:absolute;
240
  border-radius:4.4em;
241
  box-shadow:inset 0.45em 0.9em 0.05em rgba(250,252,253,0.2);
242
}
243
/* Vendor CSS prefixes */
244
#clock {
245
  -webkit-transition: all 0.5s ease;
246
  -moz-transition: all 0.5s ease;
247
  -o-transition: all 0.5s ease;
248
}
249
#clock b>i,
250
#clock i>i {
251
  -ms-transform:rotate(6deg);
252
  -webkit-transform:rotate(6deg);
253
}
254
#clock b>b {
255
  -ms-transform:rotate(30deg);
256
  -webkit-transform:rotate(30deg);
257
}
258
#clock .hh {
259
  -webkit-transform:rotate(-55deg);
260
}
261
#clock .mm {
262
  -webkit-transform:rotate(60deg);
263
}
264
#clock .ss {
265
  -webkit-animation: tick 1s normal infinite steps(25,end);
266
}
267
@-webkit-keyframes tick {
268
  0% { -webkit-transform: rotate(0deg); }
269
  12% { -webkit-transform:rotate(6deg); }
270
  100% { -webkit-transform: rotate(6deg); }   
271
}
272
#clock .s {
273
  -webkit-animation: a360_10 60s normal infinite steps(60,end); 
274
}
275
@-webkit-keyframes a360_10 {
276
  0% { -webkit-transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em) }
277
  100% { -webkit-transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em) }
278
}
279
#clock .m {
280
  -webkit-animation: a36016 3600s normal infinite linear;
281
}
282
@-webkit-keyframes a36016 {
283
  0% { -webkit-transform: translate(0, 1.6em) rotate(0deg) translate(0,-1.6em); }
284
  50% { -webkit-transform: translate(0, 1.6em) rotate(180deg) translate(0,-1.6em); }
285
  100% { -webkit-transform: translate(0, 1.6em) rotate(360deg) translate(0,-1.6em); }
286
}
287
#clock .h,
288
#css3fixed:checked ~ #clock .hh {
289
  -webkit-animation: a36010 43200s normal infinite linear;
290
}
291
 
292
/* Fixes */
293
 
294
#clock {
295
  transition:none;
296
  -webkit-transition: none;
297
  -moz-transition: none;
298
  -o-transition: none;
299
}
300
 
301
 
302
#clock b:nth-child(2) {
303
  transform:rotate(30deg);
304
  -ms-transform:rotate(30deg);
305
  -webkit-transform:rotate(30deg);
306
}
307
#clock b:nth-child(3) {
308
  transform:rotate(60deg);
309
  -ms-transform:rotate(60deg);
310
  -webkit-transform:rotate(60deg);
311
}
312
#clock b:nth-child(4) {
313
  transform:rotate(90deg);
314
  -ms-transform:rotate(90deg);
315
  -webkit-transform:rotate(90deg);
316
}
317
#clock b:nth-child(5) {
318
  transform:rotate(120deg);
319
  -ms-transform:rotate(120deg);
320
  -webkit-transform:rotate(120deg);
321
}
322
#clock b:nth-child(6) {
323
  transform:rotate(150deg);
324
  -ms-transform:rotate(150deg);
325
  -webkit-transform:rotate(150deg);
326
}
327
#clock i:nth-child(1) {
328
  transform:rotate(12deg);
329
  -ms-transform:rotate(12deg);
330
  -webkit-transform:rotate(12deg);
331
}
332
#clock i:nth-child(2) {
333
  transform:rotate(18deg);
334
  -ms-transform:rotate(18deg);
335
  -webkit-transform:rotate(18deg);
336
}
337
#clock i:nth-child(3) {
338
  transform:rotate(24deg);
339
  -ms-transform:rotate(24deg);
340
  -webkit-transform:rotate(24deg);  
341
}
342
#clock #f {
343
  -webkit-transform:translate(0,0.05em);        
344
}
345
/* IE10 fix */
346
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
347
  #css3fixed:checked ~  #clock i, #css3fixed:checked ~  #clock b {
348
    border-left:solid 0px #fff;
349
    border-right:solid 0px #fff;
350
  }
351
}
352
/* Opera rotation fix */
353
#clock .s {
354
  animation: a360_10of 60s normal infinite steps(60,end); 
355
}
356
@keyframes a360_10of {
357
  0% {  transform: translate(0, 1.0em) rotate(0deg) translate(0,-1.0em);
358
    -o-transform: translate(0, 2em) rotate(0deg) translate(0,-2em) }
359
  100% { transform: translate(0, 1.0em) rotate(360deg) translate(0,-1.0em);
360
    -o-transform: translate(0, 2em) rotate(360deg) translate(0,-2em) }
361
}
362
 
363
 
364
/*** Font for numbers ***/
365
@font-face {
366
    font-family: 'WallClock';
367
    asrc: url('wallclock.eot');
368
    }
369
 
370
@font-face {
371
    font-family: 'WallClock';
372
    src: 
373
url(data:font/otf;charset=utf-8;base64,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) format('opentype');
374
    font-weight: normal;
375
    font-style: normal;
376
}
377
                                      
378
/* For demonstration at cssdesk.com */
379
body {
380
  padding:0;
381
  margin:0;
382
  width:100%;
383
  height:100%;
384
}
385
#clock {
386
  font-size:3em;
387
  display:block;
388
  position:absolute;
389
  left:50%;
390
  top:50%;
391
  margin:-5em 0 0 -5em;
392
}
393
 
 

Untitled

CSSDeck G+