Recommendation
More Effects...
JS
1
 
 
CSS
1
body, html{
2
  width:100%;
3
  height:100%;
4
  margin:0;
5
  display: table;
6
  text-align: center;
7
}
8
 
9
.wrapper{
10
  display: table-cell;
11
  vertical-align: middle;
12
  position: relative;
13
}
14
.background-circle{
15
  width: 400px;
16
  height: 400px;
17
  border-radius: 100%;
18
  overflow: hidden;
19
  margin: 0 auto;
20
  background: #95B3BF;
21
  position: relative;
22
  -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
23
  -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
24
  -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
25
  -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
26
  animation:grow 0.7s 1 ease;
27
  -webkit-animation:grow 0.7s 1 ease;
28
  transform-origin: center;
29
}
30
.border-circle{
31
  width: 399px;
32
  height: 399px;
33
  border-radius: 100%;
34
  position: absolute;
35
  left: 50%;
36
  top: 50%;
37
  margin-left: -220px;
38
  margin-top: -220px;
39
  border: 10px solid #FCB040;
40
  -webkit-transform: scale(0);
41
  transform: scale(0);
42
  -webkit-transform-origin: center;
43
  transform-origin: center;
44
}
45
.border-circle#one{
46
  animation:border-pulse 1s 3.1s 1 ease;
47
  animation-fill-mode: forwards;
48
  -webkit-animation:border-pulse 1s 3.1s 1 ease;
49
  -webkit-animation-fill-mode: forwards;
50
}
51
.border-circle#two{
52
  animation:border-pulse 1s 3.3s 1 ease;
53
  animation-fill-mode: forwards;
54
  -webkit-animation:border-pulse 1s 3.3s 1 ease;
55
  -webkit-animation-fill-mode: forwards;
56
}
57
 
58
.body{
59
  width: 285px;
60
  height: 600px;
61
  margin: 0 auto;
62
  background: #222;
63
  border-radius: 100px;
64
  position: relative;
65
  top: 200px;
66
  animation:body-enter 0.7s 0.2s 1 ease;
67
  animation-fill-mode: forwards;
68
  -webkit-animation:body-enter 0.7s 0.2s 1 ease;
69
  -webkit-animation-fill-mode: forwards;
70
}
71
 
72
.head{
73
  width: 196px;
74
  height: 260px;
75
  border-radius: 50px;
76
  background: #FFE4BE;
77
  position: absolute;
78
  top: 50%;
79
  left: 50%;
80
  margin-top: -210px;
81
  margin-left: -98px;
82
  animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
83
  -webkit-animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
84
/*
85
  animation:grow 0.7s 0.4s 1 ease;
86
  -webkit-animation:grow 0.7s 0.4s 1 ease;
87
*/
88
  transform-origin: bottom;
89
  -webkit-transform-origin: bottom;
90
}
91
 
92
.hair-main{
93
  width:220px;
94
  height: 0px;
95
  background: #E7AB57;
96
  border-radius: 54px 54px 0px 0px;
97
  margin-left: -12px;
98
  margin-top: -10px;
99
  animation:hair-anim 0.7s 0.9s 1 ease;
100
  animation-fill-mode: forwards;
101
  -webkit-animation:hair-anim 0.7s 0.9s 1 ease;
102
  -webkit-animation-fill-mode: forwards;
103
  position: relative;
104
  z-index: 2;
105
}
106
 
107
.hair-top{
108
  width: 128px;
109
  height: 70px;
110
  opacity: 0;
111
  border-top-right-radius: 30px;
112
  background: #E7AB57;
113
  position: relative;
114
  top: -17px;
115
  left: 50%;
116
  transform: translateX(-64px);
117
  -webkit-transform: translateX(-64px);
118
  transform-origin: right;
119
  -webkit-transform-origin: right;
120
  animation:hair-top-anim 0.7s 1s 1 ease;
121
  animation:hair-top-anim 0.7s 1s 1 ease;
122
  animation-fill-mode: forwards;
123
  -webkit-animation-fill-mode: forwards;
124
}
125
 
126
.hair-bottom{
127
  width: 54px;
128
  height: 50px;
129
  opacity: 0;
130
  border-bottom-left-radius: 25px;
131
  background: #E7AB57;
132
  position: relative;
133
  top: -20px;
134
  left: 50%;
135
  transform: translateX(-27px);
136
  -webkit-transform: translateX(-27px);
137
  transform-origin: left;
138
  -webkit-transform-origin: left;
139
  animation:hair-bottom-anim 0.7s 1.4s 1 ease;
140
  animation:hair-bottom-anim 0.7s 1.4s 1 ease;
141
  animation-fill-mode: forwards;
142
  -webkit-animation-fill-mode: forwards;
143
}
144
145
.sideburn{
146
  width: 8px;
147
  height: 25px;
148
  background: #E7AB57;
149
  position: absolute;
150
  bottom: -25px;
151
  opacity: 0;
152
  animation:sideburn-anim 0.7s 0.9s 1 ease;
153
  animation-fill-mode: forwards;
154
  -webkit-animation:sideburn-anim 0.7s 0.9s 1 ease;
155
  -webkit-animation-fill-mode: forwards;
156
}
157
 
158
.sideburn#left{
159
  left: 12px;
160
}
161
 
162
.sideburn#right{
163
  right: 12px;
164
}
165
 
166
.face{
167
  width: 180px;
168
  height: 0px;
169
  border-radius: 48px 48px 0 0;
170
  background: #FFE4BE;
171
  position: absolute;
172
  top: 40px;
173
  left: 8px;
174
  animation:hair-anim 0.1s 0.8s 1 linear;
175
  animation-fill-mode: forwards;
176
  -webkit-animation:hair-anim 0.1s 0.8s 1 linear;
177
  -webkit-animation-fill-mode: forwards;
178
  z-index: 3;
179
}
180
.nose{
181
  width: 20px;
182
  height: 45px;
183
  opacity: 1;
184
  background: #FFE4BE;
185
  border-top-left-radius: 20px;
186
  position: absolute;
187
  left: 50%;
188
  top: 80px;
189
  margin-left:-20px;
190
  animation:shadow-anim 0.7s 3s 1 ease;
191
  animation-fill-mode: forwards;
192
  -webkit-animation:shadow-anim 0.7s 3s 1 ease;
193
  -webkit-animation-fill-mode: forwards;
194
  opacity: 0;
195
  z-index: 5;
196
}
197
.ear{
198
  width: 24px;
199
  height: 35px;
200
  background: #FFE4BE;
201
  border-radius: 12px;
202
  position: absolute;
203
  top: 116px;
204
  animation:grow 0.7s 1.3s 1 ease;
205
  animation-fill-mode: forwards;
206
  -webkit-animation:grow 0.7s 1.3s 1 ease;
207
  -webkit-animation-fill-mode: forwards;
208
  -webkit-transform: scale(0);
209
  transform: scale(0);
210
}
211
.mouth{
212
  width: 66px;
213
  height: 33px;
214
  border-radius: 0 0 33px 33px;
215
  background: white;
216
  position: absolute;
217
  top: 150px;
218
  left: 50%;
219
  margin-left: -33px;
220
  animation:grow 0.7s 2.6s 1 ease;
221
  animation-fill-mode: forwards;
222
  -webkit-animation:grow 0.7s 2.6s 1 ease;
223
  -webkit-animation-fill-mode: forwards;
224
  -webkit-transform: scale(0);
225
  transform: scale(0);
226
}
227
.ear#left{
228
  left: -12px;
229
}
230
.ear#right{
231
  right: -12px;
232
}
233
.eye-shadow{
234
  width:30px;
235
  height: 15px;
236
  border-radius: 0 0 15px 15px;
237
  background:rgba(149,36,0,0.1);
238
  position: absolute;
239
  top: 70px;
240
  animation:grow 0.7s 2s 1 ease;
241
  animation-fill-mode: forwards;
242
  -webkit-animation:grow 0.7s 2s 1 ease;
243
  -webkit-animation-fill-mode: forwards;
244
  -webkit-transform: scale(0);
245
  transform: scale(0);
246
}
247
.eye-shadow#left{
248
  left: 35px;
249
  z-index: 5;
250
}
251
.eye-shadow#right{
252
  right: 35px;
253
}
254
.eyebrow{
255
  width: 40px;
256
  height: 10px;
257
  background: #E7AB57;
258
  position: absolute;
259
  top: -35px;
260
  left: 50%;
261
  margin-left: -20px;
262
  opacity: 0;
263
  -webkit-backface-visibility: hidden;
264
}
265
.eye-shadow#left .eyebrow{
266
  animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
267
  animation-fill-mode: forwards;
268
  -webkit-animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
269
  -webkit-animation-fill-mode: forwards;
270
}
271
.eye-shadow#right .eyebrow{
272
  animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
273
  animation-fill-mode: forwards;
274
  -webkit-animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
275
  -webkit-animation-fill-mode: forwards;
276
}
277
.eye{
278
  width: 20px;
279
  height: 28px;
280
  border-radius: 10px;
281
  background: #334C68;
282
  position: absolute;
283
  top: -18px;
284
  left: 50%;
285
  margin-left: -10px;
286
  animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
287
  animation-fill-mode: forwards;
288
  -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
289
  -webkit-animation-fill-mode: forwards;
290
  -webkit-transform: scale(0);
291
  transform: scale(0);
292
  -webkit-transform-origin: bottom;
293
  transform-origin: bottom;
294
 
295
}
296
.shadow-wrapper{
297
  width: 98px;
298
  height: 260px;
299
  position: absolute;
300
  left: -8px;
301
  bottom: -84px;
302
  z-index: 4;
303
  overflow: hidden;
304
}
305
.shadow{
306
  width: 98px;
307
  height: 260px;
308
  border-radius: 50px;
309
  background: rgba(149,36,0,0.1);
310
  position: absolute;
311
  z-index: 4;
312
  opacity: 0;
313
  animation:shadow-anim 1s 2.8s 1 ease;
314
  animation-fill-mode: forwards;
315
  -webkit-animation:shadow-anim 1s 2.8s 1 ease;
316
  -webkit-animation-fill-mode: forwards;
317
}
318
.triangle-light{
319
  width: 400px;
320
  height: 600px;
321
  background: #FFFFFF;
322
  opacity: 0.2;
323
  position: absolute;
324
  right: -65%;
325
  animation: triangle-light-anim 1s 2.8s 1 ease;
326
  animation-fill-mode: forwards;
327
  -webkit-animation: triangle-light-anim 1s 2.8s 1 ease;
328
  -webkit-animation-fill-mode: forwards;
329
  -webkit-transform: translate(200px,0px);
330
  transform: translate(200px,0px);
331
}
332
.triangle-dark{
333
  width: 400px;
334
  height: 600px;
335
  background: #000000;
336
  opacity: 0.2;
337
  position: absolute;
338
  left: -60%;
339
  top: 30%;
340
  animation: triangle-dark-anim 1s 3s 1 ease;
341
  animation-fill-mode: forwards;
342
  -webkit-animation: triangle-dark-anim 1s 3s 1 ease;
343
  -webkit-animation-fill-mode: forwards;
344
  -webkit-transform: translate(-200px,0px);
345
  transform: translate(-200px,0px);
346
}
347
.music-note{
348
  position: absolute;
349
  font-size: 150px;
350
  color: #FCB040;
351
  width: 1px;
352
  left: 50%;
353
  opacity: 0;
354
}
355
.music-note#one{
356
  margin-left: -250px;
357
  top: 50%;
358
  animation: note-anim 2s 3.5s infinite ease;
359
  animation-fill-mode: forwards;
360
  -webkit-animation: note-anim 2s 3.5s infinite ease;
361
  -webkit-animation-fill-mode: forwards;
362
}
363
.music-note#two{
364
  margin-left: 150px;
365
  top: 30%;
366
  animation: note-anim 2s 4.3s infinite ease;
367
  animation-fill-mode: forwards;
368
  -webkit-animation: note-anim 2s 4.3s infinite ease;
369
  -webkit-animation-fill-mode: forwards;
370
}
371
.shirt-text{
372
  font-family: 'Montserrat', sans-serif;
373
  font-weight: 700;
374
  color: white;
375
  position: relative;
376
  top: -300px;
377
  font-size: 50px;
378
  display: inline-block;
379
  -webkit-text-stroke: 2px;
380
  -webkit-transform: translate(0px,100px);
381
  transform: translate(0px,100px);
382
  animation-fill-mode: forwards !important;
383
  -webkit-animation-fill-mode: forwards !important;
384
}
385
.shirt-text:nth-of-type(1){
386
  animation: text-anim 0.7s 3s 1 ease;
387
  -webkit-animation: text-anim 0.7s 3s 1 ease;
388
}
389
.shirt-text:nth-of-type(2){
390
  color: #EF4136;
391
  animation: text-anim 0.7s 3.1s 1 ease;
392
  -webkit-animation: text-anim 0.7s 3.1s 1 ease;
393
}
394
.shirt-text:nth-of-type(3){
395
  animation: text-anim 0.7s 3.2s 1 ease;
396
  -webkit-animation: text-anim 0.7s 3.2s 1 ease;
397
}
398
.shirt-text:nth-of-type(4){
399
  animation: text-anim 0.7s 3.3s 1 ease;
400
  -webkit-animation: text-anim 0.7s 3.3s 1 ease;
401
}
402
.shirt-text:nth-of-type(5){
403
  animation: text-anim 0.7s 3.4s 1 ease;
404
  -webkit-animation: text-anim 0.7s 3.4s 1 ease;
405
}
406
407
@keyframes grow
408
{
409
0% {
410
  -webkit-transform: scale(0);
411
  transform: scale(0);
412
}
413
60% {
414
  -webkit-transform: scale(1.15);
415
  transform: scale(1.15);
416
}
417
80% {
418
  -webkit-transform: scale(0.95);
419
  transform: scale(0.95);
420
}
421
100% {
422
  -webkit-transform: scale(1);
423
  transform: scale(1);
424
}
425
}
426
 
427
@-webkit-keyframes grow /* Safari and Chrome */
428
{
429
0% {
430
  -webkit-transform: scale(0);
431
  transform: scale(0);
432
}
433
60% {
434
  -webkit-transform: scale(1.15);
435
  transform: scale(1.15);
436
}
437
80% {
438
  -webkit-transform: scale(0.95);
439
  transform: scale(0.95);
440
}
441
100% {
442
  -webkit-transform: scale(1);
443
  transform: scale(1);
444
}
445
}
446
 
447
@keyframes body-enter
448
{
449
0% {
450
  -webkit-transform: translateY(200px);
451
  transform: translateY(200px);
452
}
453
60% {
454
  -webkit-transform: translateY(-20px);
455
  transform: translateY(-20px);
456
}
457
80% {
458
  -webkit-transform: translateY(30px);
459
  transform: translateY(30px);
460
}
461
100% {
462
  -webkit-transform: translateY(0px);
463
  transform: translateY(0px);
464
}
465
}
466
 
467
@-webkit-keyframes body-enter /* Safari and Chrome */
468
{
469
0% {
470
  -webkit-transform: translateY(200px);
471
  transform: translateY(200px);
472
}
473
60% {
474
  -webkit-transform: translateY(-20px);
475
  transform: translateY(-20px);
476
}
477
80% {
478
  -webkit-transform: translateY(30px);
479
  transform: translateY(30px);
480
}
481
100% {
482
  -webkit-transform: translateY(0px);
483
  transform: translateY(0px);
484
}
485
}
486
 
487
@keyframes hair-anim
488
{
489
0% {
490
  height:0px;
491
  -webkit-transform: translateY(137px);
492
  transform: translateY(137px);
493
}
494
100% {
495
  height: 137px;
496
  -webkit-transform: translateY(0px);
497
  transform: translateY(0px);
498
}
499
}
500
 
501
@-webkit-keyframes hair-anim /* Safari and Chrome */
502
{
503
0% {
504
  height:0px;
505
  -webkit-transform: translateY(137px);
506
  transform: translateY(137px);
507
}
508
100% {
509
  height: 137px;
510
  -webkit-transform: translateY(0px);
511
  transform: translateY(0px);
512
}
513
}
514
 
515
@keyframes sideburn-anim
516
{
517
0% {
518
  opacity: 0;
519
  -webkit-transform: translateY(-25px);
520
  transform: translateY(-25px);
521
}
522
100% {
523
  opacity: 1;
524
  -webkit-transform: translateY(0px);
525
  transform: translateY(0px);
526
}
527
}
528
 
529
@-webkit-keyframes sideburn-anim /* Safari and Chrome */
530
{
531
0% {
532
  opacity: 0;
533
  -webkit-transform: translateY(-25px);
534
  transform: translateY(-25px);
535
}
536
100% {
537
  opacity: 1;
538
  -webkit-transform: translateY(0px);
539
  transform: translateY(0px);
540
}
541
}
542
 
543
@keyframes hair-top-anim
544
{
545
0% {
546
  opacity: 0;
547
  -webkit-transform:translate(-64px, 30px);
548
  transform:translate(-64px, 30px);
549
}
550
60% {
551
  opacity: 1;
552
  -webkit-transform: rotate(0deg) translate(-64px, 30px);
553
  transform: rotate(0deg) translate(-64px, 30px);
554
}
555
80% {
556
  opacity: 1;
557
  -webkit-transform: rotate(10deg) translate(-64px, -5px);
558
  transform: rotate(10deg) translate(-64px, -5px);
559
}
560
100% {
561
  opacity: 1;
562
  -webkit-transform: rotate(0deg) translate(-64px, 0px);
563
  transform: rotate(0deg) translate(-64px, 0px);
564
}
565
}
566
 
567
@-webkit-keyframes hair-top-anim /* Safari and Chrome */
568
{
569
0% {
570
  opacity: 0;
571
  -webkit-transform:translate(-64px, 30px);
572
  transform:translate(-64px, 30px);
573
}
574
60% {
575
  opacity: 1;
576
  -webkit-transform: rotate(0deg) translate(-64px, 30px);
577
  transform: rotate(0deg) translate(-64px, 30px);
578
}
579
80% {
580
  opacity: 1;
581
  -webkit-transform: rotate(10deg) translate(-64px, -5px);
582
  transform: rotate(10deg) translate(-64px, -5px);
583
}
584
100% {
585
  opacity: 1;
586
  -webkit-transform: rotate(0deg) translate(-64px, 0px);
587
  transform: rotate(0deg) translate(-64px, 0px);
588
}
589
}
590
 
591
@keyframes hair-bottom-anim
592
{
593
0% {
594
  opacity: 0;
595
  -webkit-transform:translate(-27px, -40px);
596
  transform:translate(-27px, -40px);
597
}
598
60% {
599
  opacity: 1;
600
  -webkit-transform: rotate(0deg) translate(-27px, -40px);
601
  transform: rotate(0deg) translate(-27px, -40px);
602
}
603
80% {
604
  opacity: 1;
605
  -webkit-transform: rotate(10deg) translate(-27px, 5px);
606
  transform: rotate(10deg) translate(-27px, 5px);
607
}
608
100% {
609
  opacity: 1;
610
  -webkit-transform: rotate(0deg) translate(-27px, 0px);
611
  transform: rotate(0deg) translate(-27px, 0px);
612
}
613
}
614
 
615
@-webkit-keyframes hair-bottom-anim /* Safari and Chrome */
616
{
617
0% {
618
  opacity: 0;
619
  -webkit-transform:translate(-27px, -40px);
620
  transform:translate(-27px, -40px);
621
}
622
60% {
623
  opacity: 1;
624
  -webkit-transform: rotate(0deg) translate(-27px, -40px);
625
  transform: rotate(0deg) translate(-27px, -40px);
626
}
627
80% {
628
  opacity: 1;
629
  -webkit-transform: rotate(10deg) translate(-27px, 5px);
630
  transform: rotate(10deg) translate(-27px, 5px);
631
}
632
100% {
633
  opacity: 1;
634
  -webkit-transform: rotate(0deg) translate(-27px, 0px);
635
  transform: rotate(0deg) translate(-27px, 0px);
636
}
637
}
638
 
639
@keyframes music-move
640
{
641
0% {
642
  -webkit-transform: rotate(0deg);
643
  transform: rotate(0deg);
644
}
645
33% {
646
  -webkit-transform: rotate(-5deg);
647
  transform: rotate(-5deg);
648
}
649
66% {
650
  -webkit-transform: rotate(5deg);
651
  transform: rotate(5deg);
652
}
653
100% {
654
  -webkit-transform: rotate(0deg);
655
  transform: rotate(0deg);
656
}
657
}
658
 
659
@-webkit-keyframes music-move /* Safari and Chrome */
660
{
661
0% {
662
  -webkit-transform: rotate(0deg);
663
  transform: rotate(0deg);
664
}
665
33% {
666
  -webkit-transform: rotate(-5deg);
667
  transform: rotate(-5deg);
668
}
669
66% {
670
  -webkit-transform: rotate(5deg);
671
  transform: rotate(5deg);
672
}
673
100% {
674
  -webkit-transform: rotate(0deg);
675
  transform: rotate(0deg);
676
}
677
}
678
 
679
@keyframes eyebrow-anim-right
680
{
681
0% {
682
  opacity: 0;
683
  -webkit-transform: translateY(-25px);
684
  transform: translateY(-25px);
685
}
686
70% {
687
  opacity: 1;
688
  -webkit-transform: translateY(5px);
689
  transform: translateY(5px);
690
}
691
100% {
692
  opacity: 1;
693
  -webkit-transform: rotate(9deg) translateY(0px);
694
  transform: rotate(9deg) translateY(0px);
695
}
696
}
697
 
698
@-webkit-keyframes eyebrow-anim-right /* Safari and Chrome */
699
{
700
0% {
701
  opacity: 0;
702
  -webkit-transform: translateY(-25px);
703
  transform: translateY(-25px);
704
}
705
70% {
706
  opacity: 1;
707
  -webkit-transform: translateY(5px);
708
  transform: translateY(5px);
709
}
710
100% {
711
  opacity: 1;
712
  -webkit-transform: rotate(9deg) translateY(0px);
713
  transform: rotate(9deg) translateY(0px);
714
}
715
}
716
@keyframes eyebrow-raise
717
{
718
0% {
719
  top:-35px;
720
}
721
80% {
722
  top:-35px;
723
 
724
}
725
100% {
726
  top:-45px;
727
}
728
}
729
 
730
@-webkit-keyframes eyebrow-raise /* Safari and Chrome */
731
{
732
0% {
733
  top:-35px;
734
}
735
80% {
736
  top:-35px;
737
 
738
}
739
100% {
740
  top:-45px;
741
}
742
}
743
@keyframes eyebrow-anim-left
744
{
745
0% {
746
  opacity: 0;
747
  -webkit-transform: translateY(-25px);
748
  transform: translateY(-25px);
749
}
750
70% {
751
  opacity: 1;
752
  -webkit-transform: translateY(5px);
753
  transform: translateY(5px);
754
}
755
100% {
756
  opacity: 1;
757
  -webkit-transform:translateY(0px);
758
  transform:translateY(0px);
759
}
760
}
761
 
762
@-webkit-keyframes eyebrow-anim-left /* Safari and Chrome */
763
{
764
0% {
765
  opacity: 0;
766
  -webkit-transform: translateY(-25px);
767
  transform: translateY(-25px);
768
}
769
70% {
770
  opacity: 1;
771
  -webkit-transform: translateY(5px);
772
  transform: translateY(5px);
773
}
774
100% {
775
  opacity: 1;
776
  -webkit-transform:translateY(0px);
777
  transform:translateY(0px);
778
}
779
}
780
 
781
@keyframes border-pulse
782
{
783
0% {
784
  -webkit-transform: scale(0);
785
  transform: scale(0);
786
  border-width: 20px;
787
}
788
40% {
789
  -webkit-transform: scale(1);
790
  transform: scale(1);
791
  border-width: 20px;
792
  margin-left: -220px;
793
  margin-top: -220px;
794
}
795
100% {
796
  -webkit-transform: scale(1.5);
797
  transform: scale(1.5);
798
  border-width: 0px;
799
  border-style: double;
800
  margin-left: -200px;
801
  margin-top: -200px;
802
}
803
}
804
 
805
@-webkit-keyframes border-pulse /* Safari and Chrome */
806
{
807
0% {
808
  -webkit-transform: scale(0);
809
  transform: scale(0);
810
  border-width: 20px;
811
}
812
40% {
813
  -webkit-transform: scale(1);
814
  transform: scale(1);
815
  border-width: 20px;
816
  margin-left: -220px;
817
  margin-top: -220px;
818
}
819
100% {
820
  -webkit-transform: scale(1.5);
821
  transform: scale(1.5);
822
  border-width: 0px;
823
  border-style: double;
824
  margin-left: -200px;
825
  margin-top: -200px;
826
}
827
}
828
@keyframes shadow-anim
829
{
830
0% {
831
  opacity: 0;
832
  -webkit-transform: translate(98px,0px);
833
  transform: translate(98px,0px);
834
}
835
50% {
836
  opacity: 0;
837
}
838
100% {
839
  opacity: 1;
840
  -webkit-transform: translate(0px,0px);
841
  transform: translate(0px,0px);
842
}
843
}
844
 
845
@-webkit-keyframes shadow-anim /* Safari and Chrome */
846
{
847
0% {
848
  opacity: 0;
849
  -webkit-transform: translate(98px,0px);
850
  transform: translate(98px,0px);
851
}
852
50% {
853
  opacity: 0;
854
}
855
100% {
856
  opacity: 1;
857
  -webkit-transform: translate(0px,0px);
858
  transform: translate(0px,0px);
859
}
860
}
861
@keyframes triangle-light-anim
862
{
863
0% {
864
  -webkit-transform: translate(200px,0px);
865
  transform: translate(200px,0px);
866
}
867
100% {
868
  -webkit-transform: rotate(45deg) translate(0px,0px);
869
  transform: rotate(45deg) translate(0px,0px);
870
}
871
}
872
 
873
@-webkit-keyframes triangle-light-anim /* Safari and Chrome */
874
{
875
0% {
876
  -webkit-transform: translate(200px,0px);
877
  transform: translate(200px,0px);
878
}
879
100% {
880
  -webkit-transform: rotate(45deg) translate(0px,0px);
881
  transform: rotate(45deg) translate(0px,0px);
882
}
883
}
884
@keyframes triangle-dark-anim
885
{
886
0% {
887
  -webkit-transform: translate(-200px,0px);
888
  transform: translate(-200px,0px);
889
}
890
100% {
891
  -webkit-transform: rotate(-45deg) translate(0px,0px);
892
  transform: rotate(-45deg) translate(0px,0px);
893
}
894
}
895
 
896
@-webkit-keyframes triangle-dark-anim /* Safari and Chrome */
897
{
898
0% {
899
  -webkit-transform: translate(-200px,0px);
900
  transform: translate(-200px,0px);
901
}
902
100% {
903
  -webkit-transform: rotate(-45deg) translate(0px,0px);
904
  transform: rotate(-45deg) translate(0px,0px);
905
}
906
}
907
@keyframes note-anim
908
{
909
0% {
910
  opacity: 0;
911
  -webkit-transform: translate(0px,50px);
912
  transform: translate(0px,50px);
913
}
914
30% {
915
  -webkit-transform:rotate(12deg) translate(-30px,0px);
916
  transform:rotate(12deg) translate(-30px,0px);
917
}
918
45% {
919
  opacity: 1;
920
}
921
60% {
922
  -webkit-transform:rotate(-12deg) translate(30px,-100px);
923
  transform:rotate(-12deg) translate(30px,-100px);
924
}
925
100% {
926
  opacity: 0;
927
  -webkit-transform:rotate(0deg) translate(0px,-200px);
928
  transform:rotate(0deg) translate(0px,-200px);
929
}
930
}
931
 
932
@-webkit-keyframes note-anim /* Safari and Chrome */
933
{
934
0% {
935
  opacity: 0;
936
  -webkit-transform: translate(0px,50px);
937
  transform: translate(0px,50px);
938
}
939
30% {
940
  -webkit-transform:rotate(12deg) translate(-30px,0px);
941
  transform:rotate(12deg) translate(-30px,0px);
942
}
943
45% {
944
  opacity: 1;
945
}
946
60% {
947
  -webkit-transform:rotate(-12deg) translate(30px,-100px);
948
  transform:rotate(-12deg) translate(30px,-100px);
949
}
950
100% {
951
  opacity: 0;
952
  -webkit-transform:rotate(0deg) translate(0px,-200px);
953
  transform:rotate(0deg) translate(0px,-200px);
954
}
955
}
956
@keyframes text-anim
957
{
958
0% {
959
  -webkit-transform: translate(0px,100px);
960
  transform: translate(0px,100px);
961
}
962
60% {
963
  -webkit-transform:translate(0px,-20px);
964
  transform:translate(0px,-20px);
965
}
966
80% {
967
  -webkit-transform:translate(0px,15px);
968
  transform:translate(0px,15px);
969
}
970
100% {
971
  -webkit-transform:translate(0px,0px);
972
  transform:translate(0px,0px);
973
}
974
}
975
 
976
@-webkit-keyframes text-anim /* Safari and Chrome */
977
{
978
0% {
979
  -webkit-transform: translate(0px,100px);
980
  transform: translate(0px,100px);
981
}
982
60% {
983
  -webkit-transform:translate(0px,-20px);
984
  transform:translate(0px,-20px);
985
}
986
80% {
987
  -webkit-transform:translate(0px,15px);
988
  transform:translate(0px,15px);
989
}
990
100% {
991
  -webkit-transform:translate(0px,0px);
992
  transform:translate(0px,0px);
993
}
994
}
995
@keyframes eye-blink
996
{
997
0% {
998
  -webkit-transform: scaleY(1) translateY(0px);
999
  transform: scaleY(1) translateY(0px);
1000
}
1001
45% {
1002
  -webkit-transform: scaleY(1) translateY(0px);
1003
  transform: scaleY(1) translateY(0px);
1004
}
1005
50% {
1006
  -webkit-transform: scaleY(0.1);
1007
  transform: scaleY(0.1);
1008
}
1009
55% {
1010
  -webkit-transform: scaleY(1) translateY(0px);
1011
  transform: scaleY(1) translateY(0px);
1012
}
1013
100% {
1014
  -webkit-transform: scaleY(1) translateY(0px);
1015
  transform: scaleY(1) translateY(0px);
1016
}
1017
}
1018
 
1019
@-webkit-keyframes eye-blink /* Safari and Chrome */
1020
{
1021
0% {
1022
  -webkit-transform: scaleY(1) translateY(0px);
1023
  transform: scaleY(1) translateY(0px);
1024
}
1025
45% {
1026
  -webkit-transform: scaleY(1) translateY(0px);
1027
  transform: scaleY(1) translateY(0px);
1028
}
1029
50% {
1030
  -webkit-transform: scaleY(0.1);
1031
  transform: scaleY(0.1);
1032
}
1033
55% {
1034
  -webkit-transform: scaleY(1) translateY(0px);
1035
  transform: scaleY(1) translateY(0px);
1036
}
1037
100% {
1038
  -webkit-transform: scaleY(1) translateY(0px);
1039
  transform: scaleY(1) translateY(0px);
1040
}
1041
}
 
HTML
1
<body>
2
  <div class="wrapper">
3
    <div class="border-circle" id="one"></div>
4
    <div class="border-circle" id="two"></div>
5
    <div class="background-circle">
6
      <div class="triangle-light"></div>
7
      <div class="body"></div>
8
      <span class="shirt-text">I</span>
9
      <span class="shirt-text">♥</span>
10
      <span class="shirt-text">C</span>
11
      <span class="shirt-text">S</span>
12
      <span class="shirt-text">S</span>
13
      <div class="triangle-dark"></div>
14
    </div>
15
    <div class="head">
16
      <div class="ear" id="left"></div>
17
      <div class="ear" id="right"></div>
18
      <div class="hair-main">
19
        <div class="sideburn" id="left"></div>
20
        <div class="sideburn" id="right"></div>
21
        <div class="hair-top"></div>
22
      </div>
23
      <div class="face">
24
        <div class="hair-bottom"></div>
25
        <div class="nose"></div>
26
        <div class="eye-shadow" id="left">
27
          <div class="eyebrow"></div>
28
          <div class="eye"></div>
29
        </div>
30
        <div class="eye-shadow" id="right">
31
          <div class="eyebrow"></div>
32
          <div class="eye"></div>
33
        </div>
34
        <div class="mouth"></div>
35
        <div class="shadow-wrapper">
36
          <div class="shadow"></div>
37
        </div>
38
      </div>
39
    </div>
40
    <span class="music-note" id="one">♫</span>
41
    <span class="music-note" id="two">♪</span>
42
  </div>
43
</body>
44
</html>
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character