JSDM

HTML

 
1
<div class="bg"></div>
2
<div class="text">Please watch in Chrome</div>
3
<div class="container">
4
  <div class="hover-text">hover me</div>
5
  <div id="pyramid-small">
6
    <div class="pyram-small one s1"></div>
7
    <div class="pyram-small two s2"></div>
8
    <div class="pyram-small three s3"></div>
9
    <div class="pyram-small four s4"></div>
10
  </div>
11
  <div id="pyramid-small-shadow">
12
    <div class="pyram-small shadow"></div>
13
  </div>
14
  <div id="pyramid-big">
15
    <div class="pyram-big base"></div>
16
    <div class="pyram-big one s1"></div>
17
    <div class="pyram-big two s2"></div>
18
    <div class="pyram-big three s3"></div>
19
    <div class="pyram-big four s4"></div>
20
  </div>
21
  <div class="circle">
22
    <span class="dot big one"></span>
23
    <span class="dot small two"></span>
24
    <span class="dot small three"></span>
25
    <span class="dot big four"></span>
26
    <span class="dot small five"></span>
27
    <span class="dot small six"></span>
28
    <span class="dot big seven"></span>
29
    <span class="dot small eight"></span>
30
    <span class="dot small nine"></span>
31
    <span class="dot big ten"></span>
32
    <span class="dot small eleven"></span>
33
    <span class="dot small twelve"></span>
34
  </div>
35
</div>

CSS

​x
 
1
body {
2
  padding:0;
3
  margin:0;
4
  overflow: hidden;
5
}
6
​
7
.bg {
8
  position: absolute;
9
  top:0;
10
  right:0;
11
  bottom:0;
12
  left:0;
13
  width:100%;
14
  height:100%;
15
  background: url(http://38.media.tumblr.com/697d436417d1e875ef566918c5b2547b/tumblr_n7fg2vYZ741st5lhmo1_1280.jpg);
16
  background-size: cover;
17
  background-position: center;
18
  background-color: #f1f1f1;
19
  -webkit-transform: scaleX(-1);
20
  transform: scaleX(-1);
21
}
22
​
23
.text {
24
  position: absolute;
25
  font-family: arial;
26
  font-size: 14px;
27
  color: #474c48;
28
  top: 10px;
29
  left: 10px;
30
}
31
​
32
.hover-text {
33
  position: absolute;
34
  top: -25px;
35
  left: -170px;
36
  font-family: arial;
37
  font-size: 16px;
38
  font-weight: bold;
39
  color: black;
40
  opacity: 0.4;
41
}
42
​
43
.hover-text:after {
44
  content: '';
45
  position: absolute;
46
  left: 25px;
47
  top: 10px;
48
  height: 80px;
49
  width: 80px;
50
  background: url(http://www.clipartbest.com/cliparts/yco/eBe/ycoeBe8Mi.png);
51
  background-size: cover;
52
  -webkit-transform: scaleY(-1);
53
  transform: scaleY(-1);
54
}
55
​
56
.container {
57
  position: absolute;
58
  top:45%;
59
  left:50%;
60
  width:0;
61
  height:300px;
62
  margin-top: -150px;
63
}
64
​
65
#pyramid-small {
66
  position: absolute;
67
  margin-left: -50px;
68
  height: 0;
69
  width: 100px;
70
  z-index: 30;
71
  -webkit-transform-style: preserve-3d;
72
  transform-style: preserve-3d;
73
  -webkit-animation: rotateSmall 10s ease infinite;
74
  animation: rotateSmall 10s ease infinite;
75
}
76
​
77
@-webkit-keyframes rotateSmall {
78
  0% { -webkit-transform: rotateX(-10deg) rotateY(-45deg) translateY(30px); }
79
  25% { -webkit-transform: rotateX(-10deg) rotateY(45deg) translateY(20px); }
80
  50% { -webkit-transform: rotateX(-10deg) rotateY(135deg) translateY(10px); }
81
  75% { -webkit-transform: rotateX(-10deg) rotateY(225deg) translateY(0); }
82
  100% { -webkit-transform: rotateX(-10deg) rotateY(-45deg) translateY(30px); }
83
}
84
​
85
@keyframes rotateSmall {
86
  0% { transform: rotateX(-10deg) rotateY(-45deg) translateY(30px); }
87
  25% { transform: rotateX(-10deg) rotateY(45deg) translateY(20px); }
88
  50% { transform: rotateX(-10deg) rotateY(135deg) translateY(10px); }
89
  75% { transform: rotateX(-10deg) rotateY(225deg) translateY(0); }
90
  100% { transform: rotateX(-10deg) rotateY(-45deg) translateY(30px); }
91
}
92
​
93
#pyramid-small-shadow {
94
  position: absolute;
95
  margin-left: -20px;
96
  height: 0;
97
  width: 100px;
98
  z-index: 20;
99
  -webkit-transform-style: preserve-3d;
100
  transform-style: preserve-3d;
101
  -webkit-animation: rotateSmall 10s ease infinite;
102
  animation: rotateSmall 10s ease infinite;
103
}
104
​
105
@-webkit-keyframes rotateSmall {
106
  0% { -webkit-transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
107
  25% { -webkit-transform: rotateX(-12deg) rotateY(45deg) translateY(20px); }
108
  50% { -webkit-transform: rotateX(-12deg) rotateY(135deg) translateY(10px); }
109
  75% { -webkit-transform: rotateX(-12deg) rotateY(225deg) translateY(0); }
110
  100% { -webkit-transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
111
}
112
​
113
@keyframes rotateSmall {
114
  0% { transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
115
  25% { transform: rotateX(-12deg) rotateY(45deg) translateY(20px); }
116
  50% { transform: rotateX(-12deg) rotateY(135deg) translateY(10px); }
117
  75% { transform: rotateX(-12deg) rotateY(225deg) translateY(0); }
118
  100% { transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
119
}
120
​
121
#pyramid-big {
122
  position: absolute;
123
  top: 90px;
124
  margin-left: -100px;
125
  height: 200px;
126
  width: 200px;
127
  z-index: 10;
128
  -webkit-transform-style: preserve-3d;
129
  transform-style: preserve-3d;
130
  -webkit-animation: rotateBig 10s ease infinite;
131
  animation: rotateBig 10s ease infinite;
132
}
133
​
134
@-webkit-keyframes rotateBig {
135
  0% { -webkit-transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
136
  25% { -webkit-transform: rotateX(-12deg) rotateY(-225deg) translateY(20px); }
137
  50% { -webkit-transform: rotateX(-12deg) rotateY(-405deg) translateY(10px); }
138
  75% { -webkit-transform: rotateX(-12deg) rotateY(-585deg) translateY(0px); }
139
  100% { -webkit-transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
140
}
141
​
142
@keyframes rotateBig {
143
  0% { transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
144
  25% { transform: rotateX(-12deg) rotateY(-225deg) translateY(20px); }
145
  50% { transform: rotateX(-12deg) rotateY(-405deg) translateY(10px); }
146
  75% { transform: rotateX(-12deg) rotateY(-585deg) translateY(0px); }
147
  100% { transform: rotateX(-12deg) rotateY(-45deg) translateY(30px); }
148
}
149
​
150
.pyram-small { width:100px;height:100px;position:absolute; }
151
.pyram-big { width:200px;height:200px;position:absolute; }
152
​
153
.pyram-small.shadow {
154
  width: 80px;
155
  height: 80px;
156
  margin: 10px;
157
  background: black;
158
  opacity: 0.3;
159
  -webkit-filter: blur(4px);
160
  -webkit-transform: rotateX(-90deg) translateZ(88px);
161
  transform: rotateX(-90deg) translateZ(88px);
162
}
163
​
164
.pyram-small.one {
165
  width: 0;
166
  height: 0;
167
  border-left: 50px solid transparent;
168
  border-right: 50px solid transparent;
169
  border-bottom: 100px solid #e5bba1;
170
  -webkit-transition: all 2s ease;
171
  transition: all 2s ease;
172
  -webkit-transform: rotateX(30deg)  rotateY(0deg) translateY(18px) translateZ(18px) ;
173
  transform: rotateX(30deg)  rotateY(0deg) translateY(18px) translateZ(18px) ;
174
}
175
​
176
.pyram-small.two {
177
  width: 0;
178
  height: 0;
179
  border-left: 50px solid transparent;
180
  border-right: 50px solid transparent;
181
  border-bottom: 100px solid #e5bba1;
182
  -webkit-transition: all 2s ease;
183
  transition: all 2s ease;
184
  -webkit-transform: rotateX(0deg)  rotateY(90deg) rotateX(30deg) translateY(18px) translateZ(18px) ;
185
  transform: rotateX(0deg)  rotateY(90deg) rotateX(30deg) translateY(18px) translateZ(18px) ;
186
}
187
​
188
.pyram-small.three {
189
  width: 0;
190
  height: 0;
191
  border-left: 50px solid transparent;
192
  border-right: 50px solid transparent;
193
  border-bottom: 100px solid #e5bba1;
194
  -webkit-transition: all 2s ease;
195
  transition: all 2s ease;
196
  -webkit-transform: rotateX(-30deg)  rotateY(180deg) translateY(18px) translateZ(18px) ;
197
  transform: rotateX(-30deg)  rotateY(180deg) translateY(18px) translateZ(18px) ;
198
}
199
200
.pyram-small.four {
201
  width: 0;
202
  height: 0;
203
  border-left: 50px solid transparent;
204
  border-right: 50px solid transparent;
205
  border-bottom: 100px solid #e5bba1;
206
  -webkit-transition: all 2s ease;
207
  transition: all 2s ease;
208
  -webkit-transform: rotateX(0deg)  rotateY(-90deg) rotateX(30deg) translateY(18px) translateZ(18px) ;
209
  transform: rotateX(0deg)  rotateY(-90deg) rotateX(30deg) translateY(18px) translateZ(18px) ;
210
}
211
​
212
.pyram-small.one:after, .pyram-small.two:after, .pyram-small.three:after, .pyram-small.four:after {
213
  content: '';
214
  position: absolute;
215
  top: 50px;
216
  margin-left: -10px;
217
  width: 0;
218
  height: 0;
219
  border-left: 10px solid transparent;
220
  border-right: 10px solid transparent;
221
  border-bottom: 20px solid #474c48;
222
  -webkit-transition: all 2s ease;
223
  transition: all 2s ease;
224
  -webkit-transform: translateY(-50px);
225
  transform: translateY(-50px);
226
}
227
​
228
.pyram-big.base {
229
  width: 200px;
230
  height: 200px;
231
  background: #3e423f;
232
  -webkit-transform: rotateX(-90deg) translateZ(-58px);
233
  transform: rotateX(-90deg) translateZ(-58px);
234
}
235
​
236
.pyram-big.one {
237
  width: 0;
238
  height: 0;
239
  border-left: 100px solid transparent;
240
  border-right: 100px solid transparent;
241
  border-top: 200px solid #474c48;
242
  -webkit-transform: rotateX(-30deg) rotateY(0deg) translateZ(58px) ;
243
  transform: rotateX(-30deg) rotateY(0deg) translateZ(58px) ;
244
}
245
​
246
.pyram-big.two {
247
  width: 0;
248
  height: 0;
249
  border-left: 100px solid transparent;
250
  border-right: 100px solid transparent;
251
  border-top: 200px solid #474c48;
252
  -webkit-transform: rotateX(0deg) rotateY(90deg) rotateX(-30deg) translateZ(58px) ;
253
  transform: rotateX(0deg) rotateY(90deg) rotateX(-30deg) translateZ(58px) ;
254
}
255
​
256
.pyram-big.three {
257
  width: 0;
258
  height: 0;
259
  border-left: 100px solid transparent;
260
  border-right: 100px solid transparent;
261
  border-top: 200px solid #474c48;
262
  -webkit-transform: rotateX(30deg) rotateY(180deg) translateZ(58px) ;
263
  transform: rotateX(30deg) rotateY(180deg) translateZ(58px) ;
264
}
265
266
.pyram-big.four {
267
  width: 0;
268
  height: 0;
269
  border-left: 100px solid transparent;
270
  border-right: 100px solid transparent;
271
  border-top: 200px solid #474c48;
272
  -webkit-transform: rotateX(0deg) rotateY(-90deg) rotateX(-30deg) translateZ(58px) ;
273
  transform: rotateX(0deg) rotateY(-90deg) rotateX(-30deg) translateZ(58px) ;
274
}
275
​
276
/* Pyramid Shadow */
277
​
278
.pyram-small.s1 {
279
  -webkit-animation: shadowSmallOne 10s linear infinite;
280
}
281
​
282
@-webkit-keyframes shadowSmallOne {
283
  0% { -webkit-filter: brightness(1); }
284
  25% { -webkit-filter: brightness(0.8); }
285
  50% { -webkit-filter: brightness(0.6); }
286
  75% { -webkit-filter: brightness(1.2); }
287
  83% { -webkit-filter: brightness(0.6); }
288
  88% { -webkit-filter: brightness(0.8); }
289
  100% { -webkit-filter: brightness(1); }
290
}
291
​
292
.pyram-small.s2 {
293
  -webkit-animation: shadowSmallTwo 10s linear infinite;
294
}
295
​
296
@-webkit-keyframes shadowSmallTwo {
297
  0% { -webkit-filter: brightness(0.8); }
298
  25% { -webkit-filter: brightness(0.6); }
299
  50% { -webkit-filter: brightness(1.2); }
300
  75% { -webkit-filter: brightness(1); }
301
  83% { -webkit-filter: brightness(1.2); }
302
  88% { -webkit-filter: brightness(0.6); }
303
  100% { -webkit-filter: brightness(0.8); }
304
}
305
​
306
.pyram-small.s3 {
307
  -webkit-animation: shadowSmallThree 10s linear infinite;
308
}
309
​
310
@-webkit-keyframes shadowSmallThree {
311
  0% { -webkit-filter: brightness(0.6); }
312
  25% { -webkit-filter: brightness(1.2); }
313
  50% { -webkit-filter: brightness(1); }
314
  75% { -webkit-filter: brightness(0.8); }
315
  83% { -webkit-filter: brightness(1); }
316
  88% { -webkit-filter: brightness(1.2); }
317
  100% { -webkit-filter: brightness(0.6); }
318
}
319
​
320
.pyram-small.s4 {
321
  -webkit-animation: shadowSmallFour 10s linear infinite;
322
}
323
​
324
@-webkit-keyframes shadowSmallFour {
325
  0% { -webkit-filter: brightness(1.2); }
326
  25% { -webkit-filter: brightness(1); }
327
  50% { -webkit-filter: brightness(0.8); }
328
  75% { -webkit-filter: brightness(0.6); }
329
  83% { -webkit-filter: brightness(0.8); }
330
  88% { -webkit-filter: brightness(1); }
331
  100% { -webkit-filter: brightness(1.2); }
332
}
333
​
334
.pyram-big.s1 {
335
  -webkit-animation: shadowBigOne 10s linear infinite;
336
}
337
​
338
@-webkit-keyframes shadowBigOne {
339
  0% { -webkit-filter: brightness(1); }
340
  12% { -webkit-filter: brightness(1.2); }
341
  25% { -webkit-filter: brightness(0.6); }
342
  50% { -webkit-filter: brightness(1); }
343
  62% { -webkit-filter: brightness(1.2); }
344
  75% { -webkit-filter: brightness(0.6); }
345
  77% { -webkit-filter: brightness(1.2); }
346
  80% { -webkit-filter: brightness(1); }
347
  84% { -webkit-filter: brightness(0.8); }
348
  88% { -webkit-filter: brightness(0.6); }
349
  90% { -webkit-filter: brightness(1.2); }
350
  100% { -webkit-filter: brightness(1); }
351
}
352
​
353
.pyram-big.s2 {
354
  -webkit-animation: shadowBigTwo 10s linear infinite;
355
}
356
​
357
@-webkit-keyframes shadowBigTwo {
358
  0% { -webkit-filter: brightness(0.8); }
359
  25% { -webkit-filter: brightness(1.2); }
360
  37% { -webkit-filter: brightness(0.6); }
361
  50% { -webkit-filter: brightness(0.8); }
362
  75% { -webkit-filter: brightness(1.2); }
363
  77% { -webkit-filter: brightness(1); }
364
  80% { -webkit-filter: brightness(0.8); }
365
  84% { -webkit-filter: brightness(0.6); }
366
  88% { -webkit-filter: brightness(1.2); }
367
  90% { -webkit-filter: brightness(1); }
368
  100% { -webkit-filter: brightness(0.8); }
369
}
370
​
371
.pyram-big.s3 {
372
  -webkit-animation: shadowBigThree 10s linear infinite;
373
}
374
​
375
@-webkit-keyframes shadowBigThree {
376
  0% { -webkit-filter: brightness(0.6); }
377
  25% { -webkit-filter: brightness(1); }
378
  37% { -webkit-filter: brightness(1.2); }
379
  50% { -webkit-filter: brightness(0.6); }
380
  75% { -webkit-filter: brightness(1); }
381
  77% { -webkit-filter: brightness(0.8); }
382
  80% { -webkit-filter: brightness(0.6); }
383
  84% { -webkit-filter: brightness(1.2); }
384
  88% { -webkit-filter: brightness(1); }
385
  90% { -webkit-filter: brightness(0.8); }
386
  100% { -webkit-filter: brightness(0.6); }
387
}
388
​
389
.pyram-big.s4 {
390
  -webkit-animation: shadowBigFour 10s linear infinite;
391
}
392
​
393
@-webkit-keyframes shadowBigFour {
394
  0% { -webkit-filter: brightness(1.2); }
395
  12% { -webkit-filter: brightness(0.6); }
396
  25% { -webkit-filter: brightness(0.8); }
397
  50% { -webkit-filter: brightness(1.2); }
398
  62% { -webkit-filter: brightness(0.6); }
399
  75% { -webkit-filter: brightness(0.8); }
400
  77% { -webkit-filter: brightness(0.6); }
401
  80% { -webkit-filter: brightness(1.2); }
402
  84% { -webkit-filter: brightness(1); }
403
  88% { -webkit-filter: brightness(0.8); }
404
  90% { -webkit-filter: brightness(0.6); }
405
  100% { -webkit-filter: brightness(1.2); }
406
}
407
​
408
/* Dots Animation */
409
​
410
.circle {
411
  position: absolute;
412
  top: 320px;
413
  left: 50%;
414
  border-radius: 50%;
415
  background: transparent;
416
  width: 250px;
417
  height: 250px;
418
  margin: -125px 0 0 -125px;
419
  -webkit-transform-style: preserve-3d;
420
  transform-style: preserve-3d;
421
  -webkit-animation: rotateCircle 10s ease infinite;
422
  animation: rotateCircle 10s ease infinite;
423
}
424
​
425
@-webkit-keyframes rotateCircle {
426
  0% { -webkit-transform: rotateX(-110deg) rotateZ(0deg); }
427
  12% { -webkit-transform: rotateX(-110deg) rotateZ(180deg); }
428
  25% { -webkit-transform: rotateX(-110deg) rotateZ(0deg); }
429
  37% { -webkit-transform: rotateX(-110deg) rotateZ(180deg); }
430
  50% { -webkit-transform: rotateX(-110deg) rotateZ(0deg); }
431
  62% { -webkit-transform: rotateX(-110deg) rotateZ(180deg); }
432
  75% { -webkit-transform: rotateX(-110deg) rotateZ(0deg); }
433
  100% { -webkit-transform: rotateX(-110deg) rotateZ(360deg); }
434
}
435
​
436
@keyframes rotateCircle {
437
  0% { transform: rotateX(-110deg) rotateZ(0deg); }
438
  12% { transform: rotateX(-110deg) rotateZ(180deg); }
439
  25% { transform: rotateX(-110deg) rotateZ(0deg); }
440
  37% { transform: rotateX(-110deg) rotateZ(180deg); }
441
  50% { transform: rotateX(-110deg) rotateZ(0deg); }
442
  62% { transform: rotateX(-110deg) rotateZ(180deg); }
443
  75% { transform: rotateX(-110deg) rotateZ(0deg); }
444
  100% { transform: rotateX(-110deg) rotateZ(360deg); }
445
}
446
​
447
span.dot {
448
  position: absolute;
449
  width: 30px;
450
  height: 30px;
451
  margin: -15px 0 0 -15px;
452
  -webkit-animation: rotateDot 10s ease infinite;
453
  animation: rotateDot 10s ease infinite;
454
}
455
​
456
@-webkit-keyframes rotateDot {
457
  0% { -webkit-transform: rotateX(90deg) rotateY(0deg); }
458
  12% { -webkit-transform: rotateX(90deg) rotateY(-180deg); }
459
  25% { -webkit-transform: rotateX(90deg) rotateY(0deg); }
460
  37% { -webkit-transform: rotateX(90deg) rotateY(-180deg); }
461
  50% { -webkit-transform: rotateX(90deg) rotateY(0deg); }
462
  62% { -webkit-transform: rotateX(90deg) rotateY(-180deg); }
463
  75% { -webkit-transform: rotateX(90deg) rotateY(0deg); }
464
  100% { -webkit-transform: rotateX(90deg) rotateY(-360deg); }
465
}
466
​
467
@keyframes rotateDot {
468
  0% { transform: rotateX(90deg) rotateY(0deg); }
469
  12% { transform: rotateX(90deg) rotateY(-180deg); }
470
  25% { transform: rotateX(90deg) rotateY(0deg); }
471
  37% { transform: rotateX(90deg) rotateY(-180deg); }
472
  50% { transform: rotateX(90deg) rotateY(0deg); }
473
  62% { transform: rotateX(90deg) rotateY(-180deg); }
474
  75% { transform: rotateX(90deg) rotateY(0deg); }
475
  100% { transform: rotateX(90deg) rotateY(-360deg); }
476
}
477
​
478
span.dot.big:before {
479
  content: '';
480
  position: absolute;
481
  top: 0;
482
  display: block;
483
  width: 30px;
484
  height: 30px;
485
  background-image: -webkit-radial-gradient(5px 7px, circle cover, #ffffff, #d7d7d7);
486
  background-image: -moz-radial-gradient(5px 7px 45deg, circle cover, #ffffff 0%, #d7d7d7 100%);
487
  background-color: #bd9a85;
488
  border-radius: 50%;
489
  opacity: 0;
490
  -webkit-transition: all 2s ease 0.5s;
491
  transition: all 2s ease 0.5s;
492
}
493
​
494
span.dot.big:after {
495
  content: '';
496
  position: absolute;
497
  top: 0;
498
  display: block;
499
  width: 30px;
500
  height: 30px;
501
  background-image: -webkit-radial-gradient(5px 7px, circle cover, #ffe1cf, #bd9a85);
502
  background-image: -moz-radial-gradient(5px 7px 45deg, circle cover, #ffe1cf 0%, #bd9a85 100%);
503
  background-color: #bd9a85;
504
  border-radius: 50%;
505
  opacity: 1;
506
  -webkit-transition: all 2s ease;
507
  transition: all 2s ease;
508
}
509
​
510
span.dot.small:after {
511
  content: '';
512
  display: block;
513
  margin: 5px;
514
  width: 20px;
515
  height: 20px;
516
  background-image: -webkit-radial-gradient(5px 7px, circle cover, #565c57, #313432);
517
  background-image: -moz-radial-gradient(5px 7px 45deg, circle cover, #565c57 0%, #313432 100%);
518
  background-color: #313432;
519
  border-radius: 50%;
520
}
521
​
522
/* Dots Position */
523
​
524
span.dot.one { left: 50%; top: 0; }
525
span.dot.two { left: 76%; top: 8%; }
526
span.dot.three { left: 92%; top: 24%; }
527
span.dot.four { left: 100%; top: 50%; }
528
span.dot.five { left: 92%; top: 76%; }
529
span.dot.six { left: 76%; top: 92%; }
530
span.dot.seven { left: 50%; top: 100%; }
531
span.dot.eight { left: 24%; top: 92%; }
532
span.dot.nine { left: 8%; top: 76%; }
533
span.dot.ten { left: 0; top: 50%; }
534
span.dot.eleven { left: 8%; top: 24%; }
535
span.dot.twelve { left: 24%; top: 8%; }
536
​
537
/* Dots Scale */
538
​
539
span.dot.one:before, span.dot.two:before, span.dot.twelve:before,
540
span.dot.one:after, span.dot.two:after, span.dot.twelve:after {
541
  -webkit-animation: scaleDotsOne 10s ease infinite;
542
  animation: scaleDotsOne 10s ease infinite;
543
}
544
​
545
@-webkit-keyframes scaleDotsOne {
546
  0% { -webkit-transform: scale(1); }
547
  12% { -webkit-transform: scale(0.76); }
548
  25% { -webkit-transform: scale(1); }
549
  37% { -webkit-transform: scale(0.76); }
550
  50% { -webkit-transform: scale(1); }
551
  62% { -webkit-transform: scale(0.76); }
552
  75% { -webkit-transform: scale(1); }
553
  84% { -webkit-transform: scale(0.76); }
554
  94%, 100% { -webkit-transform: scale(1); }
555
}
556
​
557
@keyframes scaleDotsOne {
558
  0% { transform: scale(1); }
559
  12% { transform: scale(0.76); }
560
  25% { transform: scale(1); }
561
  37% { transform: scale(0.76); }
562
  50% { transform: scale(1); }
563
  62% { transform: scale(0.76); }
564
  75% { transform: scale(1); }
565
  84% { transform: scale(0.76); }
566
  94%, 100% { transform: scale(1); }
567
}
568
​
569
span.dot.three:before, span.dot.four:before, span.dot.five:before,
570
span.dot.three:after, span.dot.four:after, span.dot.five:after {
571
  -webkit-animation: scaleDotsTwo 10s ease infinite;
572
  animation: scaleDotsTwo 10s ease infinite;
573
}
574
​
575
@-webkit-keyframes scaleDotsTwo {
576
  0% { -webkit-transform: scale(0.88); }
577
  5% { -webkit-transform: scale(0.76); }
578
  14% { -webkit-transform: scale(0.88); }
579
  18% { -webkit-transform: scale(0.76); }
580
  25% { -webkit-transform: scale(0.88); }
581
  30% { -webkit-transform: scale(0.76); }
582
  39% { -webkit-transform: scale(0.88); }
583
  43% { -webkit-transform: scale(0.76); }
584
  50% { -webkit-transform: scale(0.88); }
585
  55% { -webkit-transform: scale(0.76); }
586
  64% { -webkit-transform: scale(0.88); }
587
  68% { -webkit-transform: scale(0.76); }
588
  75% { -webkit-transform: scale(0.88); }
589
  80% { -webkit-transform: scale(0.76); }
590
  82% { -webkit-transform: scale(0.88); }
591
  85% { -webkit-transform: scale(1); }
592
  94%, 100% { -webkit-transform: scale(0.88); }
593
}
594
​
595
@keyframes scaleDotsTwo {
596
  0% { transform: scale(0.88); }
597
  5% { transform: scale(0.76); }
598
  14% { transform: scale(0.88); }
599
  18% { transform: scale(0.76); }
600
  25% { transform: scale(0.88); }
601
  30% { transform: scale(0.76); }
602
  39% { transform: scale(0.88); }
603
  43% { transform: scale(0.76); }
604
  50% { transform: scale(0.88); }
605
  55% { transform: scale(0.76); }
606
  64% { transform: scale(0.88); }
607
  68% { transform: scale(0.76); }
608
  75% { transform: scale(0.88); }
609
  80% { transform: scale(0.76); }
610
  82% { transform: scale(0.88); }
611
  85% { transform: scale(1); }
612
  94%, 100% { transform: scale(0.88); }
613
}
614
​
615
span.dot.six:before, span.dot.seven:before, span.dot.eight:before,
616
span.dot.six:after, span.dot.seven:after, span.dot.eight:after {
617
  -webkit-animation: scaleDotsThree 10s ease infinite;
618
  animation: scaleDotsThree 10s ease infinite;
619
}
620
​
621
@-webkit-keyframes scaleDotsThree {
622
  0% { -webkit-transform: scale(0.76); }
623
  12% { -webkit-transform: scale(1); }
624
  25% { -webkit-transform: scale(0.76); }
625
  37% { -webkit-transform: scale(1); }
626
  50% { -webkit-transform: scale(0.76); }
627
  62% { -webkit-transform: scale(1); }
628
  75% { -webkit-transform: scale(0.76); }
629
  84% { -webkit-transform: scale(1); }
630
  94%, 100% { -webkit-transform: scale(0.76); }
631
}
632
​
633
@keyframes scaleDotsThree {
634
  0% { transform: scale(0.76); }
635
  12% { transform: scale(1); }
636
  25% { transform: scale(0.76); }
637
  37% { transform: scale(1); }
638
  50% { transform: scale(0.76); }
639
  62% { transform: scale(1); }
640
  75% { transform: scale(0.76); }
641
  84% { transform: scale(1); }
642
  94%, 100% { transform: scale(0.76); }
643
}
644
​
645
span.dot.nine:before, span.dot.ten:before, span.dot.eleven:before,
646
span.dot.nine:after, span.dot.ten:after, span.dot.eleven:after {
647
  -webkit-animation: scaleDotsFour 10s ease infinite;
648
  animation: scaleDotsFour 10s ease infinite;
649
}
650
​
651
@-webkit-keyframes scaleDotsFour {
652
  0% { -webkit-transform: scale(0.88); }
653
  5% { -webkit-transform: scale(1); }
654
  14% { -webkit-transform: scale(0.88); }
655
  18% { -webkit-transform: scale(1); }
656
  25% { -webkit-transform: scale(0.88); }
657
  30% { -webkit-transform: scale(1); }
658
  39% { -webkit-transform: scale(0.88); }
659
  43% { -webkit-transform: scale(1); }
660
  50% { -webkit-transform: scale(0.88); }
661
  55% { -webkit-transform: scale(1); }
662
  64% { -webkit-transform: scale(0.88); }
663
  68% { -webkit-transform: scale(1); }
664
  75% { -webkit-transform: scale(0.88); }
665
  80% { -webkit-transform: scale(1); }
666
  82% { -webkit-transform: scale(0.88); }
667
  85% { -webkit-transform: scale(0.76); }
668
  94%, 100% { -webkit-transform: scale(0.88); }
669
}
670
​
671
@keyframes scaleDotsFour {
672
  0% { transform: scale(0.88); }
673
  5% { transform: scale(1); }
674
  14% { transform: scale(0.88); }
675
  18% { transform: scale(1); }
676
  25% { transform: scale(0.88); }
677
  30% { transform: scale(1); }
678
  39% { transform: scale(0.88); }
679
  43% { transform: scale(1); }
680
  50% { transform: scale(0.88); }
681
  55% { transform: scale(1); }
682
  64% { transform: scale(0.88); }
683
  68% { transform: scale(1); }
684
  75% { transform: scale(0.88); }
685
  80% { transform: scale(1); }
686
  82% { transform: scale(0.88); }
687
  85% { transform: scale(0.76); }
688
  94%, 100% { transform: scale(0.88); }
689
}
690
​
691
/* Hover Effects */
692
​
693
#pyramid-small:hover .pyram-small {
694
  border-bottom-color: #fafafa;
695
  -webkit-transition: all 2s ease;
696
  transition: all 2s ease;
697
  cursor: pointer;
698
}
699
​
700
#pyramid-small:hover .pyram-small:after {
701
  border-bottom: 20px solid #e56045;
702
  -webkit-transition: all 2s ease;
703
  transition: all 2s ease;
704
}
705
​
706
#pyramid-small:hover ~ .circle span.dot.big:before {
707
  opacity: 1;
708
  -webkit-transition: all 2s ease;
709
  transition: all 2s ease;
710
}
711
​
712
#pyramid-small:hover ~ .circle span.dot.big:after {
713
  opacity: 0;
714
  -webkit-transition: all 2s ease 0.5s;
715
  transition: all 2s ease 0.5s;
716
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................