<div class="centered-box">
<div class="ludek">
  <div class="kobieta">
      <span class="warkocz"></span>
    <figure class="glowa">
      <span class="wlosy">
        <span class="grzywka lewa"></span>
		<span class="grzywka prawa"></span>
	  </span>
      <span class="oczy">
        <span class="oko oko-lewe"></span>
      </span>
	  <span class="nos"></span>
      <span class="buzia"></span>
	  <span class="rumien"></span>
    </figure>
    <figure class="rece">
      <span class="reka-lewa"></span>
	  <span class="reka-prawa"></span>
    </figure>
    <figure class="tlow">
      <span class="szyja"></span>
	  <span class="brzuch">
	   <span class="dekolt"></span>
         <span class="piersi">
           <span class="piersi piers-lewa"></span>
           <span class="piersi piers-prawa"></span>
        </span>
      </span>
    </figure>
    <figure class="nogi">
      <span class="noga-lewa"></span>
	  <span class="noga-prawa"></span>
    </figure>
  </div>
  <figure class="kobieta-cien">
    <span class="cien-lewy"></span>
    <span class="cien-prawy"></span>
  </figure>
</div>
</div>
<p class="tekst">Design by <a href="https://dribbble.com/shots/2485177-Dancing" target="_blank">Eran Mendel</a></p>
html,body,div,span,figure{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
body{background:#27c5cd}
::-moz-selection{background:#0a0a0a;color:#FFF}
::selection{background:#0a0a0a;color:#FFF}
a{text-decoration:none;cursor:pointer;color:#f5f5f5}
a:hover{text-decoration:underline}
.tekst{color:#32413d;font-family:'Lato',arial,sans-serif;text-transform:uppercase;font-size:14px;line-height:28px;font-weight:bold;display:block;letter-spacing:2px;max-width:100%;position:absolute;bottom:20px;left:30px;z-index:1}
span{display:block}
.centered-box{color:#f5f5f5;font-family:'Lato',arial,sans-serif;text-transform:uppercase;font-size:14px;line-height:28px;font-weight:bold;display:block;letter-spacing:2px;white-space:normal;position:absolute;max-width:100%;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:3}

.kobieta{text-align:center;position:relative;display:inline-block;width:100px;z-index:2}
.kobieta .warkocz{position:absolute;top:15%;left:3%;background:#E8A300;width:90%;height:60%;border-radius:0 0 50px 50px;z-index:-2;-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:ruchWarkocz 1.2s ease-in-out infinite;animation:ruchWarkocz 1.2s ease-in-out infinite}
.kobieta .glowa{width:95%;height:125px;border-radius:50px;position:relative;-webkit-animation:ruchGlowa 1.2s ease-in-out infinite;animation:ruchGlowa 1.2s ease-in-out infinite}
.kobieta .glowa:before{content:"";display:block;position:absolute;left:0;top:0;background:#fac5c6;width:100%;height:100%;border-radius:50px;z-index:2}
.kobieta .glowa:after{content:"";display:block;position:absolute;left:0;top:0;background:#f0b2bc;width:50%;height:100%;border-radius:50px 0 0 50px;z-index:3}
.kobieta .wlosy{width:100%;height:50%;position:absolute;top:0;left:0}
.kobieta .wlosy .grzywka.lewa{position:absolute;left:0;top:0;background:#D79600;width:50%;height:85%;border-radius:50px 0 0 0;z-index:4}
.kobieta .wlosy .grzywka.lewa:before{content:"";position:absolute;left:0px;top:35px;background:#f0b2bc;width:100%;height:50%;border-radius:20% 80% 0 0;z-index:4}
.kobieta .wlosy .grzywka.prawa{position:absolute;right:0;top:0;background:#E8A300;width:51%;height:85%;border-radius:0 50px 0 0;z-index:4}
.kobieta .wlosy .grzywka.prawa:before{content:"";position:absolute;right:0px;top:50px;background:#E8A300;width:100%;height:40%;border-radius:0 0 0 100%;z-index:4}
.kobieta .oczy{width:100%;position:absolute;top:52px;left:0;z-index:6}
.kobieta .oczy .oko{position:absolute;width:24px;height:12px;top:0;border:2px solid #CD5B86;border-width:2px 2px 0px 2px;border-radius:24px 24px 0px 0px}
.kobieta .oczy .oko.oko-lewe{left:10%}
.kobieta .nos{width:100%;height:10px;position:absolute;top:60px;z-index:6}
.kobieta .nos:after{content:"";display:block;width:20px;height:10px;background:#fac5c6;position:absolute;top:15px;left:50%;margin-left:-12px;border-radius:20px}
.kobieta .buzia{width:80%;height:32%;position:absolute;top:60%;left:7%;border:2px solid #da87a6;border-width:0px 2px 2px 2px;border-radius:0 0 50px 50px;z-index:6}
.kobieta .rumien{width:20px;height:25px;position:absolute;top:55%;right:0;background:#F0B2BC;border-radius:60px 0 60px 60px;z-index:2}
.kobieta .tlow{display:block;width:100%;height:50px;position:relative;z-index:-1;-webkit-transform-origin:bottom center;transform-origin:bottom center;-webkit-animation:ruchBiodra 1.2s ease-in-out infinite;animation:ruchBiodra 1.2s ease-in-out infinite}
.kobieta .szyja{width:100%;position:absolute;top:-5px}
.kobieta .szyja:after{content:"";display:block;width:10px;height:20px;background:#fac5c6;position:absolute;top:0;left:50%;margin-left:-5px;border-radius:20px}
.kobieta .brzuch{width:26%;height:100%;background:#fac5c6;position:absolute;top:5px;left:37%;border-radius:50% / 30%}
.kobieta .dekolt{width:16px;height:10px;background:#fac5c6;position:absolute;top:-1px;left:50%;margin-left:-8px;border-radius:0}
.kobieta .brzuch:before{content:"";width:100%;height:80%;background:#1780A2;position:absolute;top:0;left:0;border-radius:0}
.kobieta .brzuch:after{content:"";width:200%;height:70%;background:#1780A2;position:absolute;bottom:-48%;left:-50%;border-radius:50% 50% 0 0 / 160% 160% 0 0}
.kobieta .piersi{position:absolute;top:0;left:50%;z-index:10}
.kobieta .piersi .piersi{position:absolute;width:18px;height:18px;top:14px;margin-left:-9px;background:#1780A2;border-radius:50%}
.kobieta .piersi .piersi.piers-lewa{left:-14px}
.kobieta .piersi .piersi.piers-prawa{left:14px}
.kobieta .rece{display:block;width:100%;position:relative;top:7px;z-index:-1}
.kobieta .rece .reka-lewa,
.kobieta .rece .reka-prawa{position:absolute;top:50%;background:#fac5c6;width:50px;height:10px;border-radius:10px}
.kobieta .rece .reka-lewa{left:0;-webkit-transform-origin:center right;transform-origin:center right;-webkit-animation:ruchRekaLewa 1.2s ease-in-out infinite;animation:ruchRekaLewa 1.2s ease-in-out infinite}
.kobieta .rece .reka-prawa{right:0;-webkit-transform-origin:center left;transform-origin:center left;-webkit-animation:ruchRekaPrawa 1.2s ease-in-out infinite;animation:ruchRekaPrawa 1.2s ease-in-out infinite}
.kobieta .rece .reka-lewa:after,
.kobieta .rece .reka-prawa:after{content:"";display:block;width:50px;height:10px;background:#fac5c6;position:absolute;top:0;border-radius:10px}
.kobieta .rece .reka-lewa:after{left:-100%;margin-left:5px;-webkit-transform-origin:center right;transform-origin:center right;-webkit-animation:ruchRekaLewaAfter 1.2s ease-in-out infinite;animation:ruchRekaLewaAfter 1.2s ease-in-out infinite}
.kobieta .rece .reka-prawa:after{right:-100%;margin-right:5px;-webkit-transform-origin:center left;transform-origin:center left;-webkit-animation:ruchRekaPrawaAfter 1.2s ease-in-out infinite;animation:ruchRekaPrawaAfter 1.2s ease-in-out infinite}
.kobieta .nogi{display:block;width:100%;height:120px;position:relative;z-index:-2}
.kobieta .nogi .noga-lewa,
.kobieta .nogi .noga-prawa{position:absolute;left:50%;top:-2px;background:#fac5c6;width:12px;margin-left:0;height:55%;border-radius:0 0 12px 12px;-webkit-transform-origin:top center;transform-origin:top center}
.kobieta .nogi .noga-lewa{background:#f0b2bc;margin-left:-10px;-webkit-animation:ruchNogaLewa 0.7s ease-in-out infinite;animation:ruchNogaLewa 0.7s ease-in-out infinite}
.kobieta .nogi .noga-prawa{margin-left:0;-webkit-animation:ruchNogaPrawa 0.7s ease-in-out infinite;animation:ruchNogaPrawa 0.7s ease-in-out infinite}
.kobieta .nogi .noga-lewa:after,
.kobieta .nogi .noga-prawa:after{content:"";display:block;width:12px;height:70%;background:#fac5c6;position:absolute;top:100%;margin-top:-12px;border-radius:12px}
.kobieta .nogi .noga-lewa:after{background:#f0b2bc;right:0;-webkit-transform-origin:top right;transform-origin:top right;-webkit-animation:ruchNogaLewaAfter 0.7s ease-in-out infinite;animation:ruchNogaLewaAfter 0.7s ease-in-out infinite}
.kobieta .nogi .noga-prawa:after{left:0;-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation:ruchNogaPrawaAfter 0.7s ease-in-out infinite;animation:ruchNogaPrawaAfter 0.7s ease-in-out infinite}
.kobieta-cien{display:block;width:80%;position:relative;margin-left:10%;z-index:1}
.kobieta-cien .cien-lewy,
.kobieta-cien .cien-prawy{position:absolute;bottom:20px;display:block;width:90%;height:20px;background:#22abb3;border-radius:50%;z-index:-1}
.kobieta-cien .cien-lewy{left:0;-webkit-animation:ruchCienLewyKobieta 1.2s ease-in-out infinite;animation:ruchCienLewyKobieta 1.2s ease-in-out infinite}
.kobieta-cien .cien-prawy{right:0;-webkit-animation:ruchCienPrawyKobieta 1.2s ease-in-out infinite;animation:ruchCienPrawyKobieta 1.2s ease-in-out infinite}


/*! animacja warkocz */
@-webkit-keyframes ruchWarkocz{
0%, 100%{height:52%;-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}
25%{height:50%;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
40%{height:60%}
50%{height:52%;-webkit-transform:rotateZ(-40deg);transform:rotateZ(-40deg)}
75%{height:50%;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
90%{height:60%}
}
@keyframes ruchWarkocz{
0%, 100%{height:52%;-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}
25%{height:50%;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
40%{height:60%}
50%{height:52%;-webkit-transform:rotateZ(-40deg);transform:rotateZ(-40deg)}
75%{height:50%;-webkit-transform:rotateZ(-45deg);transform:rotateZ(-45deg)}
90%{height:60%}
}
/*! animacja noga lewa */
@-webkit-keyframes ruchNogaLewa{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
25%{-webkit-transform:rotateZ(30deg);transform:rotateZ(30deg)}
}
@keyframes ruchNogaLewa{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
25%{-webkit-transform:rotateZ(30deg);transform:rotateZ(30deg)}
}
/*! animacja noga lewa after */
@-webkit-keyframes ruchNogaLewaAfter{
0%, 50%, 100%{margin-right:0;-webkit-transform:rotateZ(0deg) translate(0px,0px);transform:rotateZ(0deg) translate(0px,0px)}
25%{-webkit-transform:rotateZ(-60deg) translate(-6px,-6px);transform:rotateZ(-60deg) translate(-6px,-6px)}
}
@keyframes ruchNogaLewaAfter{
0%, 50%, 100%{margin-right:0;-webkit-transform:rotateZ(0deg) translate(0px,0px);transform:rotateZ(0deg) translate(0px,0px)}
25%{-webkit-transform:rotateZ(-60deg) translate(-6px,-6px);transform:rotateZ(-60deg) translate(-6px,-6px)}
}
/*! animacja noga prawa */
@-webkit-keyframes ruchNogaPrawa{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
75%{-webkit-transform:rotateZ(-30deg);transform:rotateZ(-30deg)}
}
@keyframes ruchNogaPrawa{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
75%{-webkit-transform:rotateZ(-30deg);transform:rotateZ(-30deg)}
}
/*! animacja noga prawa after */
@-webkit-keyframes ruchNogaPrawaAfter{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg) translate(0px,0px);transform:rotateZ(0deg) translate(0px,0px)}
75%{-webkit-transform:rotateZ(60deg) translate(6px,-6px);transform:rotateZ(60deg) translate(6px,-6px)}
}
@keyframes ruchNogaPrawaAfter{
0%, 50%, 100%{-webkit-transform:rotateZ(0deg) translate(0px,0px);transform:rotateZ(0deg) translate(0px,0px)}
75%{-webkit-transform:rotateZ(60deg) translate(6px,-6px);transform:rotateZ(60deg) translate(6px,-6px)}
}
/*! animacja reka lewa */
@-webkit-keyframes ruchRekaLewa{
0%,100%{-webkit-transform:rotateZ(20deg);transform:rotateZ(20deg)}
50%{-webkit-transform:rotateZ(-20deg);transform:rotateZ(-20deg)}
}
@keyframes ruchRekaLewa{
0%,100%{-webkit-transform:rotateZ(20deg);transform:rotateZ(20deg)}
50%{-webkit-transform:rotateZ(-20deg);transform:rotateZ(-20deg)}
}
/*! animacja reka lewa after */
@-webkit-keyframes ruchRekaLewaAfter{
0%,100%{-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}
50%{-webkit-transform:rotateZ(60deg);transform:rotateZ(60deg)}
}
@keyframes ruchRekaLewaAfter{
0%,100%{-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}
50%{-webkit-transform:rotateZ(60deg);transform:rotateZ(60deg)}
}
/*! animacja reka prawa */
@-webkit-keyframes ruchRekaPrawa{
0%, 100%{-webkit-transform:rotateZ(20deg);transform:rotateZ(20deg)}
50%{-webkit-transform:rotateZ(-20deg);transform:rotateZ(-20deg)}
}
@keyframes ruchRekaPrawa{
0%, 100%{-webkit-transform:rotateZ(20deg);transform:rotateZ(20deg)}
50%{-webkit-transform:rotateZ(-20deg);transform:rotateZ(-20deg)}
}
/*! animacja reka prawa after */
@-webkit-keyframes ruchRekaPrawaAfter{
0%, 100%{-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}
50%{-webkit-transform:rotateZ(60deg);transform:rotateZ(60deg)}
}
@keyframes ruchRekaPrawaAfter{
0%, 100%{-webkit-transform:rotateZ(-60deg);transform:rotateZ(-60deg)}
50%{-webkit-transform:rotateZ(60deg);transform:rotateZ(60deg)}
}
/*! animacja glowa */
@-webkit-keyframes ruchGlowa{
0%, 100%{-webkit-transform:rotateZ(-10deg);transform:rotateZ(-10deg)}
25%{-webkit-transform:rotateZ(-15deg);transform:rotateZ(-15deg)}
50%{-webkit-transform:rotateZ(10deg);transform:rotateZ(10deg)}
75%{-webkit-transform:rotateZ(15deg);transform:rotateZ(15deg)}
}
@keyframes ruchGlowa{
0%, 100%{-webkit-transform:rotateZ(-10deg);transform:rotateZ(-10deg)}
25%{-webkit-transform:rotateZ(-15deg);transform:rotateZ(-15deg)}
50%{-webkit-transform:rotateZ(10deg);transform:rotateZ(10deg)}
75%{-webkit-transform:rotateZ(15deg);transform:rotateZ(15deg)}
}
/*! animacja bioderka */
@-webkit-keyframes ruchBiodra{
0%, 30%, 100%{-webkit-transform:rotateZ(10deg);transform:rotateZ(10deg)}
50%, 70%{-webkit-transform:rotateZ(-10deg);transform:rotateZ(-10deg)}
}
@keyframes ruchBiodra{
0%, 30%, 100%{-webkit-transform:rotateZ(10deg);transform:rotateZ(10deg)}
50%, 70%{-webkit-transform:rotateZ(-10deg);transform:rotateZ(-10deg)}
}
/*! animacja cien lewy */
@-webkit-keyframes ruchCienLewyKobieta{
0%, 35%, 100%{width:100%}
50%, 65%, 75%{width:150%}
}
@keyframes ruchCienLewyKobieta{
0%, 35%, 100%{width:100%}
50%, 65%, 75%{width:150%}
}
/*! animacja cien prawy */
@-webkit-keyframes ruchCienPrawyKobieta{
0%, 15%, 100%{width:150%}
50%, 75%, 85%{width:100%}
}
@keyframes ruchCienPrawyKobieta{
0%, 15%, 100%{width:150%}
50%, 75%, 85%{width:100%}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.