Ajax Loader
HTML 
 
1
 
2
<div class="wrapper">
3
  <div class="hulk">
4
    <div class="head"><div class="mouth"></div></div>
5
    <div class="right-arm"></div>
6
    <div class="fist"></div>
7
    <div class="left-arm"></div>
8
    <div class="body"></div>
9
    <div class="right-leg"></div>
10
    <div class="left-leg"></div>
11
  </div>
12
13
  <div class="captain">
14
    <div class="head">A</div>
15
    <div class="body"><div class="star"></div></div>
16
    <div class="arms"></div>
17
    <div class="shield"><div class="star"></div></div>
18
    <div class="hands"></div>
19
    <div class="legs"></div>
20
    <div class="boots"></div>
21
  </div>
22
23
  <div class="ironman">
24
    <div class="helmet"><div class="mask"></div></div>
25
    <div class="right-arm"></div>
26
    <div class="left-arm"></div>
27
    <div class="body"><div class="power"></div></div>
28
    <div class="right-leg"></div>
29
    <div class="left-leg"></div>
30
  </div>
31
 
32
<div class="thor">
33
    <div class="helmet"></div>
34
    <div class="head">
35
      <div class="beard"></div>
36
    </div>
37
    <div class="cap"></div>
38
    <div class="arm-right"></div>
39
    <div class="arm-left"></div>
40
    <div class="body"></div>
41
    <div class="hammer"></div>
42
    <div class="legs"></div>
43
    <div class="feet"></div>
44
  </div>
45
</div>
46
 
47
 
48
</div>
49
 
 
CSS 
 
1
 
2
 
3
$verdeHulk: #bdbd00;
4
$hulkPants:#581bbb;
5
$body:#43abf0;
6
$bodyShadow:#29708f;
7
$white:#fff;
8
$whiteShadow:#ffffcb;
9
$red:#b63700;
10
$skin: #fdb0a4;
11
$shield:#c53905;
12
$ironbody:#ab3300;
13
$irondetail:#deb800;
14
$ironShadow:#c98700;
15
$thorbody:#004278;
16
$thorshadow:#00272b;
17
$thorskin:#ffcee7;
18
$thorskinShadow:#ffc688;
19
$hammer:#382727;
20
$time:7s;
21
 
22
 
23
 
24
@mixin keyframes($name) {
25
  @-webkit-keyframes #{$name} {
26
    @content;
27
  }
28
  @-moz-keyframes #{$name} {
29
    @content;
30
  }
31
  @-ms-keyframes #{$name} {
32
    @content;
33
  }
34
  @keyframes #{$name} {
35
    @content;
36
  }
37
}
38
@mixin star($top, $left) {
39
   display: block;
40
   color: $white;
41
   width: 0px;
42
   height: 0px;
43
   border-right:  10px solid transparent;
44
   border-bottom: 7px  solid $white;
45
   border-left:   10px solid transparent;
46
   margin-top: $top;
47
   margin-left: $left;
48
   position: absolute;
49
   transform:    rotate(35deg);
50
   &::before {
51
   border-bottom: 8px solid $white;
52
   border-left: 3px solid transparent;
53
   border-right: 3px solid transparent;
54
   position: relative;
55
   height: 0;
56
   width: 0;
57
   top: -4px;
58
   left: -6px;
59
   display: block;
60
   content: '';
61
   transform: rotate(-35deg);
62
}
63
   &::after {
64
   position: absolute;
65
   display: block;
66
   color: red;
67
   top: 0px;
68
   left: -10px;
69
   width: 0px;
70
   height: 0px;
71
   border-right: 10px solid transparent;
72
   border-bottom: 7px solid $white;
73
   border-left: 10px solid transparent;
74
   transform: rotate(-70deg);
75
   content: '';
76
}
77
}
78
  
79
80
81
*, *:before, *:after {
82
box-sizing:border-box;
83
}
84
 
85
body{
86
   font-size:16px;
87
    position:absolute;
88
    width:100%;
89
    height:100%;
90
}
91
.wrapper {
92
  position:relative;
93
  width:550px;
94
  height:365px;
95
  margin:15% auto;
96
  animation: shake $time infinite;
97
}
98
 
99
 
100
//HULK
101
.hulk{
102
  position:absolute;
103
  margin-left:200px;
104
  bottom:0px;
105
  margin-bottom:300px;
106
.head {
107
  width: 4.713em;
108
  position:absolute;
109
  margin-top:-2.75em;
110
  margin-left:3.563em;  
111
    border-bottom: 3.75em solid $verdeHulk;
112
    border-left: 0.938em solid transparent;
113
    border-right: 0.938em solid transparent;
114
    height: 0;
115
  z-index:10;
116
  &::after {
117
    content:"";
118
    width:2.25em;
119
    height:0.375em;
120
    position:absolute;
121
    margin-top:0.538em;
122
    margin-left:0.313em;
123
    background:#034600;
124
  }
125
  &::before{
126
    content:"";
127
    width:3.25em;
128
    height:0.75em;
129
    position:absolute;
130
    margin-top:-0.75em;
131
    margin-left:-0.25em;
132
    background:#034600;
133
    border-top-left-radius: 1.875em;
134
    border-top-right-radius:1.875em;
135
  }
136
}
137
.mouth {
138
  width:31px;
139
  height:0px;
140
  position:absolute;
141
  margin-top:25px;
142
  margin-left:8px;
143
  overflow:hidden;
144
  background-image:
145
        linear-gradient(
146
          to bottom,
147
          #fff,
148
          #fff 25%,
149
          #4b0a00 25%,
150
          #4b0a00 70%,
151
          #fff 75%,
152
          #fff 100%
153
        );
154
 border-top-left-radius: 0.5em;
155
  border-top-right-radius: 0.5em;
156
  animation: mouthOpen $time infinite;
157
  &::before{
158
    content:"";
159
    width: 10px;
160
    height:7px;
161
    position:absolute;
162
    background:#902e2b;
163
    margin-top:9px;
164
    margin-left:11px;
165
    border-top-left-radius:0.5em;
166
    border-top-right-radius: 0.5em;
167
 
168
  }
169
}
170
.right-arm{
171
   width:13.313em;
172
    height:13.75em;
173
    margin-top:1em;
174
    margin-left:2em;
175
    border-radius:50%;
176
    background: #b5b500;
177
    position:absolute;
178
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
179
    animation: hulkRightarm $time infinite;
180
  &::after{
181
    content:"";
182
    width:12.063em;
183
    height:9.625em;
184
    border-radius:50%;
185
    background:white;
186
    position:absolute;
187
    transform: translateY(1.25em);
188
    margin-left:-3.313em;
189
  }
190
}
191
.left-arm
192
{
193
   width:13.313em;
194
    height:13.75em;
195
    margin-top:1em;
196
    margin-left:-4.3em;
197
    border-radius:50%;
198
    background: #949400;
199
    position:absolute;
200
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
201
    animation: hulkLeftarm $time infinite;
202
  &::after{
203
    content:"";
204
    width: 12.063em;
205
    height: 9.625em;
206
    border-radius: 50%;
207
    background: white;
208
    position: absolute;
209
    transform: translateY(1.25em);
210
    margin-left: 4.563em;
211
  }
212
}
213
.fist{
214
   width: 4.375em;
215
  height: 4.375em;
216
  position: absolute;
217
  border-radius: 50%;
218
  margin-top: 11.7em;
219
  margin-left: -2.1em;
220
  background:#949400;
221
  box-shadow: 11.1em 0 0 #b5b500;
222
  z-index: 10;
223
  animation: hulkHands $time infinite;
224
}
225
 
226
.body {
227
  width: 12.5em;
228
  height: 12.5em;
229
  background: $verdeHulk;
230
  border-radius: 50%;
231
  position: absolute;
232
  box-shadow: inset
233
    1.125em 0 0 darken($verdeHulk, 5%),
234
    -0.938em 0 0 darken($verdeHulk, 10%);
235
  z-index:10;
236
  &::before{
237
    content:"";
238
    width: 0.75em;
239
    height: 0.75em;
240
    border-radius: 50%;
241
    position: absolute;
242
    margin-top: 3.125em;
243
    margin-left: 1.375em;
244
    background: darken($verdeHulk,10%);
245
    box-shadow: 7.625em 0 0 darken($verdeHulk, 10%);
246
  }
247
  &::after{
248
    content:"";
249
    position:absolute;
250
    width:0.313em;
251
    height:0.313em;
252
    border-radius:50%;
253
    margin-top:10em;
254
    margin-left:5.625em;
255
    background:darken($verdeHulk,10%);
256
    box-shadow: 0 2.625em 0 #9ac7f1
257
  }
258
}
259
.right-leg {
260
  width:0.625em;
261
  height:6.438em;
262
  position:absolute;
263
  margin-left:4.25em;
264
  margin-top:12.3em;
265
  background-image:
266
        linear-gradient(
267
          to bottom,
268
          darken($hulkPants,20%),
269
          darken($hulkPants,20%) 50%,
270
          darken($verdeHulk,20%) 50%,
271
          darken($verdeHulk,20%) 100%
272
        );
273
   animation:hulkPants2 $time infinite ;
274
  &::after{
275
    content:"";
276
    width:0.938em;
277
    height:0.875em;
278
    position:absolute;
279
    margin-left:0.625em;
280
    background:darken($hulkPants, 10%);
281
  }
282
  &::before {
283
    content:"";
284
    width:1.125em;
285
    height:0.188em;
286
    position:absolute;
287
    margin-top:6.25em;
288
    margin-left:-1.125em;
289
    background:darken($verdeHulk,20%);
290
  }
291
}
292
.left-leg{
293
  width:0.625em;
294
  height:6.438em;
295
  position:absolute;
296
  margin-left:6.688em;
297
  margin-top:12.3em;
298
  background-image:
299
        linear-gradient(
300
          to bottom,
301
          $hulkPants,
302
          $hulkPants 50%,
303
          $verdeHulk 50%,
304
          $verdeHulk 100%
305
        );
306
  animation:hulkPants $time infinite ;
307
  &::after{
308
    content:"";
309
    width:0.938em;
310
    height:0.875em;
311
    position:absolute;
312
    background:$hulkPants;
313
    margin-left:-0.938em;
314
  }
315
  &::before {
316
    content:"";
317
    width:1.125em;
318
    height:0.188em;
319
    position:absolute;
320
    margin-top:6.25em;
321
    margin-left:0.625em;
322
    background:$verdeHulk;
323
  }
324
}
325
}  
326
  
327
 
328
//CAPTAIN AMERICA  
329
.captain {
330
 position: absolute;
331
 z-index: 1000;
332
 margin-left: 355px;
333
 bottom: 0px;
334
 margin-bottom: 146px;
335
   .head {
336
    width: 21px;
337
    height: 36px;
338
    background: $body;
339
    position: absolute;
340
    margin-top: -36px;
341
    margin-left: 44px;
342
    border-top-left-radius: 20px;
343
    border-top-right-radius: 20px;
344
    color: $white;
345
    text-align: center;
346
    font-size: 0.6em;
347
    font-weight: bold;
348
    &::before{
349
    content:"";
350
    width: 21px;
351
    height: 17px;
352
    background: $skin;
353
    position: absolute;
354
    margin-left: -7px;
355
    margin-top: 19px;
356
    border-bottom-left-radius: 20px;
357
    border-bottom-right-radius: 20px;
358
    box-shadow: inset 8px 0 0 0 darken($skin, 5%);
359
  }
360
   &::after {
361
    content: "";
362
    width: 4px;
363
    height: 4px;
364
    position: absolute;
365
    background: $skin;
366
    border-radius: 50%;
367
    margin-top: 16px;
368
    margin-left: -5px;
369
  
370
    }
371
}
372
 
373
374
 .body
375
    {
376
    height: 53px;
377
    width: 107px;
378
    border-radius: 0 0 110px 110px;
379
    background: $body;
380
    box-shadow: inset 8px 0px 0 0 $bodyShadow, inset 17px 0px 0 0 darken($body,3%);
381
    z-index: 5;
382
    &::before {
383
    content:"";
384
    width: 133px;
385
    height: 30px;
386
    margin-left: -14px;
387
    position: absolute;
388
    border-radius: 30px;
389
    background-image:  linear-gradient(to right,$bodyShadow, $body);
390
    z-index:-1;
391
    }
392
    &::after{
393
    content:'';
394
    width: 30px;
395
    height: 10px;
396
    position: absolute;
397
    margin-top: 49px;
398
    margin-left: 38px;
399
    background-image: linear-gradient(to right, darken($red,5%), darken($red,5%) 30%, $whiteShadow 30%, $whiteShadow 70%, $red 70%, $red 100%);
400
    }
401
     .star{
402
      @include star(18px,43px)
403
      }
404
  
405
  }
406
407
  .arms {
408
    width: 10px;
409
    height: 60px;
410
    position: absolute;
411
    background: $whiteShadow;
412
    margin-top: -30px;
413
    margin-left: 10px;
414
    box-shadow: 75px 0 0 0 $whiteShadow;
415
    z-index: -1;
416
    &::before{
417
      content:"";
418
      width: 28px;
419
      height: 50px;
420
      position: absolute;
421
      background: $whiteShadow;
422
      border-radius: 30% 50%;
423
      margin-left: -18px;
424
      margin-top: -3px;
425
      box-shadow: 95px 0 0 0 $whiteShadow;
426
    }
427
  }
428
  .shield {
429
        width: 40px;
430
        height: 40px;
431
        background: $body;
432
        border-radius: 50%;
433
        position: absolute;
434
        z-index: 100;
435
        margin-left: 75px;
436
        margin-top: 30px;
437
        box-shadow: 0 0 0 8px $whiteShadow, 0 0 0 18px $shield;
438
        transform:rotate(-30deg);
439
        .star{
440
      @include star(15px,10px);
441
      }
442
      }
443
      
444
  .hands {
445
    width: 15px;
446
    height: 30px;
447
    position: absolute;
448
    margin-top: 29px;
449
    margin-left: 8px;
450
    background: darken($red, 3%);
451
    transform: skew(10deg);
452
    &::before {
453
      content:"";
454
      width: 10px;
455
      height: 30px;
456
      background: darken($verdeHulk, 2%);
457
      position: absolute;
458
      margin-left: 12px;
459
      transform: skew(-10deg);
460
      }
461
      &::after {
462
      content:"";
463
      width: 13px;
464
      height: 13px;
465
      border-radius: 50%;
466
      position: absolute;
467
      margin-top: 21px;
468
      margin-left: -1px;
469
      background: darken($red, 3%);
470
      }
471
    }
472
    .legs {
473
      width: 8px;
474
      height: 100px;
475
      background: $bodyShadow;
476
      position:absolute;
477
      margin-left: 38px;
478
      margin-top: 5px;
479
      box-shadow: 22px 0 0 0 $body;
480
      &::before {
481
        content:"";
482
        width: 30px;
483
        height: 5px;
484
        background: darken($red,20%);
485
        position:absolute;    
486
     }
487
      &::after {
488
      content: "";
489
      width: 14px;
490
      height: 9px;
491
      background-image: linear-gradient(to right, $bodyShadow, $body);
492
      position: absolute;
493
      margin-left: 8px;
494
      margin-top: 5px;
495
      }
496
    }
497
    .boots {
498
      width: 10px;
499
      height: 41px;
500
      position: absolute;
501
      margin-top: 105px;
502
      margin-left: 37px;
503
      background: darken($red, 10%);
504
      box-shadow: 22px 0 0 0 $red;
505
      &::after {
506
        content:"";
507
        width: 25px;
508
        height: 2px;
509
        position: absolute;
510
        background: darken($red, 10%);
511
        margin-top: 39px;
512
        margin-left: -15px;
513
        box-shadow: 40px 0 0 0 $red;
514
        }
515
      &::before{
516
        content: "";
517
        width: 18px;
518
        height: 12px;
519
        background: darken($red, 10%);
520
        position: absolute;
521
        margin-left: -4px;
522
        box-shadow: 22px 0 0 0 $red;
523
        }
524
      }
525
}  
526
  
527
 
528
//IRONMAN
529
 
530
 .ironman {
531
 position: absolute;
532
 z-index: 900;
533
 margin-left: 0;
534
 margin-bottom:135px;
535
 bottom:0;
536
  .helmet {
537
  width:22px;
538
  height:34px;
539
  background:$ironbody;
540
  position: absolute;
541
  margin-top: -33px;
542
  margin-left: 44px;
543
  border-top-left-radius: 10px;
544
  border-top-right-radius: 10px;
545
  overflow:hidden;
546
  &::before {
547
    content:"";
548
    width:7px;
549
    height:2px;
550
    background:white;
551
    position:absolute;
552
    margin-top:10px;
553
    margin-left:0px;
554
    z-index:3;
555
    box-shadow:15px 0 0 0 white;
556
  }
557
}  
558
  .mask{
559
    width:10px;
560
    height:18px;
561
    background:$irondetail;
562
    position:relative;
563
    margin-top:7px;
564
    margin-left:6px;
565
    &::before {
566
      content:"";
567
      width:13px;
568
      height:18px;
569
      background:$irondetail;
570
      position:absolute;
571
      transform:rotate(60deg);  
572
      margin-top:-3px;
573
      margin-left:4px;
574
    }
575
    &::after {
576
      content:"";
577
      width:13px;
578
      height:18px;
579
      background:$irondetail;
580
      position:absolute;
581
      transform:rotate(-60deg);
582
      margin-top:-3px;
583
      margin-left:-5px;
584
    }
585
 }
586
 .body {
587
   height: 53px;
588
    width: 107px;
589
    border-radius: 0 0 110px 110px;
590
    background: $ironbody;
591
    box-shadow: inset 10px 0px 0 0 darken($ironbody,5%), inset 20px 0px 0 0 darken($ironbody,3%);
592
   padding-top:11px;
593
   z-index:50;
594
   &::before {
595
     content:"";
596
     width:32px;
597
     height:32px;
598
     background: darken( $ironbody, 5%);
599
     position:absolute;
600
     border-radius:50%;
601
     margin-left:-15px;
602
     margin-top:-18px;
603
     box-shadow:105px 0 0 0 $ironbody;
604
     z-index:50;
605
   }
606
   &::after {
607
     content:"";
608
     width:40px;
609
     height:30px;
610
     position:absolute;
611
     margin-top:20px;
612
     margin-left:35px;
613
      background-image:
614
        linear-gradient(
615
          to right,
616
          darken($ironbody, 5%),
617
          darken($ironbody, 5%) 15%,
618
          darken($ironbody, 3%) 15%,
619
          darken($ironbody, 3%) 29%,
620
          $ironbody 20%,
621
          $ironbody 20%
622
        );
623
    
624
   }
625
 }  
626
 .power {
627
   width:17px;
628
   height:17px;
629
   background:white;
630
   border-radius:50%;
631
   margin:0 auto;
632
   box-shadow:0 0 0 5px $irondetail;
633
 }
634
 .left-leg {
635
  width:10px;
636
  height:90px;
637
  background: $ironShadow;
638
  position:absolute;
639
  margin-left:35px;
640
  margin-top:12px;
641
  border-top-right-radius:10px;
642
  &::before {
643
    content:"";
644
    width:25px;
645
    height:65px;
646
    background: darken($ironbody,5%);
647
    position:absolute;
648
    border-top-right-radius:20px;
649
    margin-top:60px;
650
    margin-left:-10px;
651
  
652
  }
653
}
654
.right-leg {
655
  width:10px;
656
  height:90px;
657
  background: $irondetail;
658
  position:absolute;
659
  margin-left:65px;
660
  margin-top:12px;
661
  border-top-left-radius:10px;
662
  &::before {
663
    content:"";
664
    width:25px;
665
    height:65px;
666
    background: $ironbody;
667
    position:absolute;
668
    border-top-left-radius:20px;
669
    margin-top:60px;
670
    margin-left:-5px;
671
  
672
  }
673
674
}
675
 
676
.left-arm{
677
  width:10px;
678
  height:45px;
679
  background:$ironShadow;
680
  position:absolute;
681
  margin-left:-6px;
682
  margin-top:18px;
683
  border-bottom-left-radius:20px;
684
  &::before {
685
    content:"";
686
    height: 60px;
687
    width: 31px;
688
    border-radius: 60px 0px 0px 60px;
689
    background: darken($ironbody,5%);
690
    position:absolute;
691
    margin-top:30px;
692
    margin-left:-21px;
693
    z-index:-1;
694
  }
695
  &::after {
696
    content:"";
697
    width:10px;
698
    height:10px;
699
    border-radius:50%;
700
    background: darken($ironbody,5%);
701
    position:absolute;
702
    margin-top:80px;
703
    margin-left:5px;
704
  
705
  }
706
}
707
 
708
  
709
.right-arm{
710
  width:10px;
711
  height:45px;
712
  background:$ironShadow;
713
  position:absolute;
714
  margin-left:105px;
715
  margin-top:18px;
716
  border-bottom-right-radius:20px;
717
  &::before {
718
    content:"";
719
    height: 60px;
720
    width: 31px;
721
    border-radius: 0px 60px 60px 0px;
722
    background: $ironbody;
723
    position:absolute;
724
    margin-top:30px;
725
    margin-left:0px;
726
    z-index:-1;
727
  }
728
  &::after {
729
    content:"";
730
    width:10px;
731
    height:10px;
732
    border-radius:50%;
733
    background:$ironbody;
734
    position:absolute;
735
    margin-top:80px;
736
    margin-left:-5px;
737
  
738
  }
739
}  
740
741
  
742
}
743
 
744
 
745
 
746
 
747
//THOR
748
.thor{
749
  position:absolute;
750
  margin-left:118px;
751
  z-index:1000;
752
  margin-bottom:220px;
753
  bottom:0;
754
  .helmet{
755
      width: 0;
756
      height: 0;
757
      position:absolute;
758
      border-left: 18px solid transparent;
759
      border-right: 18px solid transparent;
760
      border-bottom: 40px solid #d7a900;
761
      margin-top:-40px;
762
      margin-left:42px;
763
      box-shadow:0 -18px 0 -16px #66999a;
764
    &::before {
765
      content:"";
766
      width:13px;
767
      height:25px;
768
      position:absolute;
769
      background:#66999a;
770
      margin-left:-19px;
771
      margin-top:-12px;
772
      border-bottom-left-radius:10px;
773
      border-top-right-radius:15px;
774
      box-shadow:inset -3px 0px 0 transparent;
775
    }
776
    &::after {
777
      content:"";
778
      width:13px;
779
      height:25px;
780
      position:absolute;
781
      background:#89b9ef;
782
      margin-left:10px;
783
      margin-top:-12px;
784
      border-bottom-right-radius:10px;
785
      border-top-left-radius:15px;
786
      box-shadow:inset -3px 0px 0 transparent;
787
    }
788
  }
789
  .head {
790
    width:21px;
791
    height:40px;
792
    background-image:linear-gradient(#72a9d5, #72a9d5 32%,#ffdeef 10%);
793
    position:absolute;
794
    margin-top:-40px;
795
    margin-left:50px;
796
    border-radius:30px 30px 0 0;
797
    overflow:hidden;
798
    &::after {
799
      content:"";
800
        width:10px;
801
        height:17px;
802
        background:#d7a900;
803
        position:absolute;
804
        border-radius:10px 10px 0px 0px;
805
        margin-top:20px;
806
        margin-left:5px;
807
    }
808
    .beard{
809
      width:21px;
810
      height:5px;
811
      background:#d7a900;
812
      position:absolute;
813
      margin-top:12px;
814
      &::before {
815
        content:"";
816
        width:11px;
817
        height:5px;
818
        background:#d7a900;
819
        position:absolute;
820
        margin-left:12px;
821
        margin-top:17px;
822
        transform:rotate(-40deg);
823
      }
824
      &::after {
825
        content:"";
826
        width:11px;
827
        height:5px;
828
        background:#d7a900;
829
        position:absolute;
830
        margin-left:-3px;
831
        margin-top:17px;
832
        transform:rotate(40deg);
833
      }
834
    }
835
  }
836
.body {
837
  border-top: 65px solid $thorbody;
838
  border-left: 40px solid transparent;
839
  border-right:40px solid transparent;
840
  height: 0;
841
  width: 120px;
842
  position:absolute;
843
  &::before {
844
    content:"";
845
    width:40px;
846
    height:5px;
847
    position:absolute;
848
    background-image: linear-gradient(to right, #c98700, #d7a900);
849
  }
850
  &::after {
851
    content:"";
852
    width:30px;
853
    height:30px;
854
    border-radius:50%;
855
    position:absolute;
856
    background:#94bdef;
857
    margin-top:-60px;
858
    margin-left:-17px;
859
    box-shadow:45px 0 0 0 #94bdef,
860
      10px 29px 0 -5px #94bdef,
861
      35px 29px 0 -5px #94bdef
862
      ;
863
  }
864
}
865
  .arm-right {
866
    width:40px;
867
    height:40px;
868
    background:$thorskin;
869
    border-radius:50%;
870
    position:absolute;
871
    margin-left:100px;
872
    box-shadow:-5px 0 0 $thorskin, -10px 0 0 $thorskin,-15px 0 0 $thorskin,   -20px 0 0 $thorskin, -20px 90px 0 -15px $thorskin, -20px 95px 0 -15px $thorskin, -20px 100px 0 -15px $thorskin
873
      ;
874
    &::before {
875
      content:"";
876
      width:40px;
877
      height:100px;
878
      position:absolute;
879
      background:$thorskin;
880
      margin-left:-5px;
881
      margin-top:10px;
882
      border-bottom-right-radius:30px;
883
    }
884
    &::after {
885
      content:"";
886
      width:10px;
887
      height:5px;
888
      background:#290000;
889
      position:absolute;
890
      margin-top:113px;
891
      margin-left:-5px;
892
    }
893
  }
894
  .arm-left {
895
    width:40px;
896
    height:40px;
897
    background:$thorskinShadow;
898
    border-radius:50%;
899
    position:absolute;
900
    margin-left:0px;
901
    box-shadow:-5px 0 0 $thorskinShadow, -10px 0 0 $thorskinShadow,-15px 0 0 $thorskinShadow,   -20px 0 0 $thorskinShadow, 0 90px 0 -15px $thorskinShadow,0 95px 0 -15px $thorskinShadow, 0 100px 0 -15px $thorskinShadow;
902
    &::before {
903
      content:"";
904
      width:40px;
905
      height:100px;
906
      position:absolute;
907
      background:$thorskinShadow;
908
      margin-left:-15px;
909
      margin-top:10px;
910
      border-bottom-left-radius:30px;
911
    }
912
    &::after {
913
      content:"";
914
      width:10px;
915
      height:5px;
916
      background:#290000;
917
      position:absolute;
918
      margin-top:113px;
919
      margin-left:15px;
920
    }
921
  }
922
923
  .legs{
924
    width:13px;
925
    height:67px;
926
    background:darken($thorbody,7%);
927
    position:absolute;
928
    margin-top:70px;
929
    left:40px;
930
    border-radius:0 0 30px 30px;
931
    box-shadow:27px 0 0 0 $thorbody;
932
    &::before {
933
      content:"";
934
      width:10px;
935
      height:75px;
936
      position:absolute;
937
      background:darken($thorbody,7%);
938
      margin-left:5px;
939
      box-shadow: 0 75px 0 0 #b75600, 21px 0 0 0 $thorbody, 21px 75px 0 0 #ce9700;
940
    }
941
    &::after {
942
      content:"";
943
      width:11px;
944
      height:10px;
945
      background-image: linear-gradient(darken($thorbody,7%), $thorbody);
946
      position:absolute;
947
      margin-left:15px;
948
    }
949
  }
950
  .cap {
951
    width:120px;
952
    height:200px;
953
    position:absolute;
954
    background:#a72300;
955
    z-index:0;
956
    box-shadow:inset 10px 0 0 #721200, inset 20px 0 0 #7b1e00;
957
  }
958
  .hammer {
959
    width:42px;
960
    height:27px;
961
    position:absolute;
962
    background: $hammer; /* fallback */
963
  background:
964
    linear-gradient(135deg, transparent 5px, $hammer 0) top left,
965
    linear-gradient(225deg, transparent 5px, $hammer 0) top right,
966
    linear-gradient(315deg, transparent 5px, $hammer 0) bottom right,
967
    linear-gradient(45deg,  transparent 5px, $hammer 0) bottom left;
968
  background-size: 52% 52%;
969
  background-repeat: no-repeat;
970
    margin-top:148px;
971
    margin-left:1px;
972
    &::before{
973
      content:"";
974
      width:6px;
975
      height:25px;
976
      background:darken($hammer,5%);
977
      position:absolute;
978
      margin-top:-23px;
979
      margin-left:18px;
980
    }
981
    &::after {
982
      content:"";
983
      width:6px;
984
      height:3px;
985
      position:absolute;
986
      background:darken($hammer,5%);
987
      margin-top:25px;
988
      margin-left:18px;
989
    }
990
  }
991
  .feet {
992
    width:25px;
993
    height:2px;
994
    position:absolute;
995
    background:#b75600;
996
    margin-top:220px;
997
    margin-left:30px;
998
    box-shadow:36px 0 0 #ce9700;
999
    &::after {
1000
     content:"";
1001
     height:10px;
1002
     width:20px;
1003
     position:absolute;
1004
     border-radius: 90px 90px 0 0;
1005
     background:#ce9700;
1006
     margin-top:-85px;
1007
     margin-left:8px;
1008
    box-shadow:24px 0 0 #b75600;
1009
    }
1010
  }
1011
}
1012
  
1013
  
1014
    
1015
  
1016
 
1017
/*Hand Animation*/
1018
 
1019
@include keyframes(shake) {
1020
 78%, 80%,82%,84%,86%,88%,90%,92% {
1021
  
1022
    top:3px;
1023
    left:2px;
1024
  }
1025
  79%,81%,83%,85%,87%,89%,91% {
1026
  
1027
    top:0px;
1028
    left:-2px;
1029
  }
1030
1031
}
1032
 
1033
@include keyframes(mouthOpen) {
1034
  77%{height:0px;}
1035
  80%{
1036
    height:22px;
1037
  }
1038
  93%{
1039
    height:22px;
1040
    opacity:1;
1041
  }
1042
  95%{
1043
    height:0px;
1044
    opacity:0;
1045
  }
1046
 
1047
}
1048
 
1049
 
1050
@include keyframes(hulkHands){
1051
 6%{
1052
   box-shadow: 11.1em 0 0 #b5b500;
1053
 }
1054
 77%{
1055
   box-shadow: 11.1em 0 0 #b5b500;
1056
   margin-left:-2.1em;
1057
   @include translate (0,0)
1058
  }
1059
  80%{
1060
    margin-left:0.5em;
1061
    box-shadow:8.5em 0 0 #b5b500;
1062
    @include translate (-0.9em,-19.9em)
1063
  
1064
  }
1065
  93%{
1066
    margin-left:0.5em;
1067
    box-shadow:8.5em 0 0 #b5b500;
1068
    @include translate (-0.9em,-19.9em)
1069
  }
1070
  94%{
1071
    box-shadow: 11.1em 0 0 #b5b500;
1072
    margin-left:-2.1em;
1073
    @include translate (0em,-0em)
1074
  }
1075
}
1076
 
1077
@include keyframes(hulkRightarm){
1078
  77%{
1079
    margin-top:1em;
1080
    margin-left:2em;
1081
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
1082
  }
1083
  80%{
1084
    margin-top:-8.125em;
1085
    margin-left:2.5em;
1086
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
1087
  }
1088
  93%{
1089
    margin-top:-8.125em;
1090
    margin-left:2.5em;
1091
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
1092
  }
1093
  95%{
1094
    margin-top:1em;
1095
    margin-left:2em;
1096
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
1097
  }
1098
}
1099
@include keyframes(hulkLeftarm){
1100
  77%{
1101
    margin-top:1em;
1102
    margin-left:-4.3em;
1103
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
1104
  }
1105
  80%{
1106
    margin-top:-8.125em;
1107
    margin-left:-4.375em;
1108
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
1109
  }
1110
  93%{
1111
    margin-top:-8.125em;
1112
    margin-left:-4.375em;
1113
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
1114
  }
1115
  95%{
1116
    margin-top:1em;
1117
    margin-left:-4.3em;
1118
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
1119
  }
1120
  }
 

CSS The Avengers

CSSDeck G+