TianDev

<div class="pikachu">
    <div class="ear-left"></div>
    <div class="ear-right"></div>
    <!-- //Ear -->

    <div class="pik-body">
        <div class="head">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
            <div class="cheek-left">

                <div class="hold-thunder hold-thunder-1">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 1 -->

                <div class="hold-thunder hold-thunder-2">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 2 -->

                <div class="hold-thunder hold-thunder-3">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 3 -->

                <div class="light"></div>
                <!-- Light -->
            </div>
            <div class="cheek-right">

                <div class="hold-thunder hold-thunder-1">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 1 -->

                <div class="hold-thunder hold-thunder-2">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 2 -->

                <div class="hold-thunder hold-thunder-3">
                    <div class="thunder thunder-1"></div>
                    <div class="thunder thunder-2"></div>
                    <div class="thunder thunder-3"></div>
                </div>
                <!-- //Thunder 3 -->

                <div class="light"></div>
                <!-- Light -->
            </div>
        </div>
        <!-- //head -->

        <div class="mid">
            <div class="hand-left"></div>
            <div class="hand-right"></div>
            <div class="mark-1"></div>
            <div class="mark-2"></div>
        </div>
        <!-- //Mid -->

        <div class="foot-left"></div>
        <div class="foot-right"></div>
        <!-- //Foot -->
    </div>
    <!-- //Body -->

    <div class="pik-tail">
        <div class="tail tail-1"></div>
        <div class="tail tail-2"></div>
        <div class="tail tail-3"></div>
        <div class="tail tail-4"></div>
        <div class="tail tail-5"></div>
    </div>
    <!-- //Tail -->
</div>

html, body {
  background: #888;
}

.pikachu {
  width: 320px;
  height: 460px;
  position: relative;
  margin: 10vh auto;
}

.pikachu div {
  position: absolute;
}

.pik-body {
  width: 185px;
  height: 340px;
  bottom: 0;
  z-index: 300;
}

.pik-body .head {
  background: #fed823;
  width: 160px;
  height: 160px;
  right: 7px;
  border: 3px solid #0a0a0a;
  border-top-left-radius: 130px 120px;
  border-top-right-radius: 150px 100px;
  border-bottom-left-radius: 80px 80px;
  border-bottom-right-radius: 25px 120px;
  border-bottom: none;
}

.pik-body .head::before {
  position: absolute;
  background: #fed823;
  display: block;
  content: '';
  width: 30px;
  height: 70px;
  border-left: 4px solid #0a0a0a;
  left: -14px;
  top: 81px;
  border-top-left-radius: 150% 90px;
  border-bottom-left-radius: 150% 90px;
  -webkit-transform: rotateZ(-28deg);
          transform: rotateZ(-28deg);
}

.pik-body .eye-left {
  background: #0a0a0a;
  width: 20px;
  height: 32px;
  border-radius: 50%;
  top: 50px;
  left: 10px;
  -webkit-transform: rotateZ(10deg);
          transform: rotateZ(10deg);
}

.pik-body .eye-left::before {
  position: absolute;
  content: '';
  display: block;
  background: white;
  width: 8px;
  height: 13px;
  border-radius: 50%;
  top: 5px;
  left: 10px;
  -webkit-transform: rotateZ(8deg);
          transform: rotateZ(8deg);
  -webkit-animation: pisca 3s infinite step-start 0s;
          animation: pisca 3s infinite step-start 0s;
}

.pik-body .eye-left::after {
  position: absolute;
  content: '';
  display: block;
  background: #0a0a0a;
  width: 24px;
  height: 3px;
  -webkit-transform: rotateZ(28deg);
          transform: rotateZ(28deg);
  -webkit-animation: pisca 3s infinite step-start 0s;
          animation: pisca 3s infinite step-start 0s;
}

.pik-body .eye-right {
  background: #0a0a0a;
  width: 30px;
  height: 33px;
  border-radius: 50%;
  top: 57px;
  right: 36px;
}

.pik-body .eye-right::before {
  position: absolute;
  content: '';
  display: block;
  background: white;
  width: 10px;
  height: 12px;
  border-radius: 50%;
  left: 8px;
  top: 5px;
  -webkit-animation: pisca 3s infinite step-start 0s;
          animation: pisca 3s infinite step-start 0s;
}

.pik-body .eye-right::after {
  position: absolute;
  content: '';
  display: block;
  background: #0a0a0a;
  right: 3px;
  width: 28px;
  height: 3px;
  -webkit-transform: rotateZ(-28deg);
          transform: rotateZ(-28deg);
  -webkit-animation: pisca 3s infinite step-start 0s;
          animation: pisca 3s infinite step-start 0s;
}

.pik-body .nose {
  background: #0a0a0a;
  width: 10px;
  height: 11px;
  top: 75px;
  left: 45px;
  border-radius: 0% 50% 30% 50%;
  -webkit-transform: rotateZ(-36deg);
          transform: rotateZ(-36deg);
}

.pik-body .mouth {
  width: 25px;
  height: 20px;
  border-radius: 0% 0% 100% 0%;
  border-bottom: 4px solid #0a0a0a;
  border-right: 3px solid #0a0a0a;
  top: 90px;
  left: 48px;
  -webkit-transform: rotateZ(55deg);
          transform: rotateZ(55deg);
}

.pik-body .mouth::before {
  position: absolute;
  content: '';
  display: block;
  width: 17px;
  height: 15px;
  border-radius: 0% 0% 90% 0%;
  border-bottom: 4px solid #0a0a0a;
  border-right: 3px solid #0a0a0a;
  top: 22px;
  right: 20px;
  -webkit-transform: rotateZ(-10deg);
          transform: rotateZ(-10deg);
}

.pik-body .cheek-left {
  background: #e94e24;
  width: 23px;
  height: 40px;
  border-radius: 50%;
  left: -18px;
  top: 80px;
  border-right: 3px solid #0a0a0a;
  border-top: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
}

.pik-body .cheek-right {
  background: #e94e24;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 90px;
  right: 18px;
  border: 3px solid #0a0a0a;
}

.ear-left {
  background: #fed823;
  width: 36px;
  height: 160px;
  left: 30px;
  border-bottom-left-radius: 80px 70%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  -webkit-transform: rotateZ(25deg);
          transform: rotateZ(25deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  border-left: 3px solid #0a0a0a;
  border-right: 3px solid #0a0a0a;
  border-top: 1px solid #0a0a0a;
  overflow: hidden;
  z-index: 100;
  -webkit-animation: ear_left 4.5s infinite linear 0s;
          animation: ear_left 4.5s infinite linear 0s;
}

.ear-left::before {
  position: absolute;
  content: '';
  display: block;
  left: 4px;
  width: 38px;
  height: 50px;
  background: #231815;
  -webkit-transform: rotateZ(12deg);
          transform: rotateZ(12deg);
  border-top-right-radius: 250%;
  border-bottom-left-radius: 15px;
  border-bottom: 3px solid #0a0a0a;
}

.ear-right {
  background: #231815;
  top: 41px;
  right: 160px;
  width: 30px;
  height: 140px;
  -webkit-transform: rotateZ(80deg);
          transform: rotateZ(80deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  border-bottom-left-radius: 80px 150%;
  border-top-left-radius: 190%;
  border-top-right-radius: 150%;
  border: 3px solid #0a0a0a;
  border-bottom: none;
  z-index: 500;
  overflow: hidden;
  -webkit-animation: ear_right 4.5s infinite linear 0s;
          animation: ear_right 4.5s infinite linear 0s;
}

.ear-right::before {
  position: absolute;
  content: '';
  background: #fed823;
  width: 40px;
  height: 110px;
  bottom: 0;
  border-radius: 0 80% 0 0;
  border-top: 3px solid #0a0a0a;
}

.mid {
  background: #fed823;
  width: 160px;
  height: 150px;
  top: 163px;
  left: 30px;
  border-top-right-radius: 70px 140px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 30px;
  border-bottom: 3px solid #0a0a0a;
  border-right: 3px solid #0a0a0a;
  z-index: 1;
}

.mid::before {
  position: absolute;
  content: '';
  display: block;
  background: #fed823;
  width: 150px;
  height: 40px;
  border-right: 3px solid #0a0a0a;
  right: 15px;
  -webkit-transform: rotateZ(-8deg);
          transform: rotateZ(-8deg);
}

.mid::after {
  position: absolute;
  content: '';
  display: block;
  background: #fed823;
  width: 70px;
  height: 100px;
  bottom: -2px;
  left: -20px;
  border-radius: 90% 30% 0 90%;
  border-left: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
}

.hand-left {
  background: #fed823;
  width: 65px;
  height: 65px;
  left: -20px;
  top: -10px;
  border-radius: 70% 50% 80% 60%;
  border-left: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
  z-index: 5;
}

.hand-left::before {
  position: absolute;
  content: '';
  display: block;
  width: 40px;
  height: 10px;
  border-radius: 40%;
  border-top: 2px solid #0a0a0a;
  -webkit-transform: rotateZ(17deg);
          transform: rotateZ(17deg);
  top: 16px;
  left: 17px;
}

.hand-right {
  background: #fed823;
  width: 85px;
  height: 65px;
  right: 45px;
  top: -5px;
  border-left: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
  border-top-left-radius: 150px 150%;
  border-bottom-left-radius: 50px 70%;
  border-bottom-right-radius: 50px 70%;
  z-index: 25;
}

.mark-1 {
  background: #c76e29;
  width: 18px;
  height: 12px;
  z-index: 20;
  top: 27px;
  right: 13px;
  border-top-left-radius: 50px 100%;
  border-bottom-left-radius: 50px 100%;
  border: 2px solid #0a0a0a;
  border-right: none;
  -webkit-transform: rotateZ(-15deg);
          transform: rotateZ(-15deg);
}

.mark-2 {
  background: #c76e29;
  width: 28px;
  height: 16px;
  z-index: 20;
  top: 82px;
  right: 0;
  border-top-left-radius: 100px 190%;
  border-bottom-left-radius: 50px 130%;
  border: 2px solid #0a0a0a;
  border-right: none;
  -webkit-transform: rotateZ(-10deg);
          transform: rotateZ(-10deg);
}

.foot-left {
  background: #fed823;
  width: 70px;
  height: 30px;
  bottom: 0;
  border-radius: 75%;
  border: 3px solid #0a0a0a;
  -webkit-transform: rotateZ(-18deg);
          transform: rotateZ(-18deg);
}

.foot-left::before {
  content: '';
  position: absolute;
  display: block;
  border-top: 3px solid #0a0a0a;
  width: 25px;
  height: 6px;
  bottom: 8px;
  border-radius: 40%;
  -webkit-transform: rotateZ(-15deg);
          transform: rotateZ(-15deg);
}

.foot-left::after {
  content: '';
  position: absolute;
  display: block;
  border-top: 3px solid #0a0a0a;
  width: 25px;
  height: 8px;
  bottom: 12px;
  left: -1px;
  border-radius: 50%;
  -webkit-transform: rotateZ(-15deg);
          transform: rotateZ(-15deg);
}

.foot-right {
  background: #fed823;
  bottom: 0;
  width: 70px;
  height: 27px;
  right: -12px;
  border-radius: 85%;
  border-bottom: 3px solid #0a0a0a;
  -webkit-transform: rotateZ(17deg);
          transform: rotateZ(17deg);
}

.foot-right::before {
  position: absolute;
  content: '';
  display: block;
  width: 25px;
  height: 6px;
  border-top: 3px solid #0a0a0a;
  border-radius: 40%;
  right: 0;
  bottom: 3px;
  -webkit-transform: rotateZ(15deg);
          transform: rotateZ(15deg);
}

.foot-right::after {
  position: absolute;
  content: '';
  display: block;
  width: 25px;
  height: 8px;
  border-top: 3px solid #0a0a0a;
  border-radius: 50%;
  right: -1px;
  bottom: 8px;
  -webkit-transform: rotateZ(15deg);
          transform: rotateZ(15deg);
}

.pik-tail {
  width: 150px;
  height: 250px;
  right: 0;
  top: 140px;
  -webkit-transform-origin: 0 bottom;
          transform-origin: 0 bottom;
  -webkit-animation: tail_move 3s ease infinite;
          animation: tail_move 3s ease infinite;
}

.pik-tail .tail {
  background: #fed823;
  border: 2px solid #0a0a0a;
}

.pik-tail .tail-1 {
  z-index: 5;
  background: #983c0d;
  width: 52px;
  height: 15px;
  bottom: 14px;
  border-bottom: 2px solid #0a0a0a;
  border-top: 2px solid #0a0a0a;
  -webkit-transform: rotateZ(-50deg);
          transform: rotateZ(-50deg);
  border-right: none;
}

.pik-tail .tail-2 {
  z-index: 4;
  background: #983c0d;
  width: 33px;
  height: 18px;
  bottom: 45px;
  left: 26px;
  -webkit-transform: rotateZ(40deg);
          transform: rotateZ(40deg);
  border-left: none;
}

.pik-tail .tail-2::before {
  position: absolute;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 9px solid #fed823;
  border-right: 9px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  border-top: 5px solid rgba(0, 0, 0, 0);
  left: -2px;
  top: -1px;
}

.pik-tail .tail-2::after {
  position: absolute;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 9px solid #fed823;
  border-right: 9px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  border-top: 5px solid rgba(0, 0, 0, 0);
  left: -2px;
  top: 8px;
}

.pik-tail .tail-3 {
  z-index: 3;
  width: 35px;
  height: 26px;
  top: 154px;
  left: 7px;
  border-top: 2px solid #0a0a0a;
  border-right: none;
  -webkit-transform: rotateZ(-50deg);
          transform: rotateZ(-50deg);
}

.pik-tail .tail-4 {
  z-index: 2;
  width: 69px;
  height: 35px;
  bottom: 101px;
  left: -3px;
  border-top: 2px solid #0a0a0a;
  -webkit-transform: rotateZ(42deg);
          transform: rotateZ(42deg);
  border-left: none;
}

.pik-tail .tail-4::before {
  position: absolute;
  content: '';
  display: block;
  width: 50px;
  height: 9px;
  background: #fed823;
  top: -6px;
  left: -18px;
}

.pik-tail .tail-5 {
  z-index: 1;
  width: 150px;
  height: 85px;
  bottom: 138px;
  left: -14px;
  border-top: 3px solid #0a0a0a;
  border-left: 2px solid #0a0a0a;
  border-right: 2px solid #0a0a0a;
  -webkit-transform: rotateZ(-7deg);
          transform: rotateZ(-7deg);
  border-top-left-radius: 100% 30px;
  border-bottom-right-radius: 20% 10px;
}

.hold-thunder {
  width: 30px;
  height: 35px;
  z-index: 1;
  -webkit-animation: light 5s infinite step-start 2s;
          animation: light 5s infinite step-start 2s;
}

.hold-thunder-1 {
  top: -8px;
  left: -7px;
}

.hold-thunder-2 {
  left: 10px;
  top: 0;
  -webkit-transform: rotate(111deg);
          transform: rotate(111deg);
}

.hold-thunder-3 {
  left: 6px;
  top: -1px;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}

.cheek-right .hold-thunder-1 {
  top: -5px;
  left: -10px;
}

.cheek-right .hold-thunder-2 {
  left: 20px;
  top: -4px;
}

.cheek-right .hold-thunder-3 {
  left: 17px;
  top: 2px;
}

.thunder {
  background: white;
  height: 1px;
}

.thunder-1 {
  width: 10px;
  left: 15px;
  top: 28px;
}

.thunder-2 {
  left: 8px;
  top: 25px;
  width: 10px;
  -webkit-transform: rotate(41deg);
          transform: rotate(41deg);
}

.thunder-3 {
  left: 3px;
  top: 24px;
  width: 8px;
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}

.light {
  width: 100px;
  height: 100px;
  z-index: 2;
  left: -38px;
  top: -30px;
  background-image: -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 20, from(white), color-stop(0.1, rgba(255, 240, 174, 0.5)), to(rgba(255, 255, 253, 0)));
  -webkit-animation: light 5s infinite step-start 2s;
          animation: light 5s infinite step-start 2s;
}

.cheek-right .light {
  background-image: -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 30, from(white), color-stop(0.1, rgba(255, 240, 174, 0.5)), to(rgba(255, 255, 253, 0)));
  top: -31px;
  left: -31px;
}

@-webkit-keyframes light {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes light {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ear_left {
  0% {
    -webkit-transform: rotateZ(25deg);
            transform: rotateZ(25deg);
  }
  50% {
    -webkit-transform: rotateZ(17deg);
            transform: rotateZ(17deg);
  }
  100% {
    -webkit-transform: rotateZ(25deg);
            transform: rotateZ(25deg);
  }
}

@keyframes ear_left {
  0% {
    -webkit-transform: rotateZ(25deg);
            transform: rotateZ(25deg);
  }
  50% {
    -webkit-transform: rotateZ(17deg);
            transform: rotateZ(17deg);
  }
  100% {
    -webkit-transform: rotateZ(25deg);
            transform: rotateZ(25deg);
  }
}

@-webkit-keyframes ear_right {
  0% {
    -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg);
  }
  50% {
    -webkit-transform: rotateZ(72deg);
            transform: rotateZ(72deg);
  }
  100% {
    -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg);
  }
}

@keyframes ear_right {
  0% {
    -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg);
  }
  50% {
    -webkit-transform: rotateZ(72deg);
            transform: rotateZ(72deg);
  }
  100% {
    -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg);
  }
}

@-webkit-keyframes pisca {
  0%, 100% {
    opacity: 0;
  }
  15%, 95% {
    opacity: 1;
  }
}

@keyframes pisca {
  0%, 100% {
    opacity: 0;
  }
  15%, 95% {
    opacity: 1;
  }
}

@-webkit-keyframes tail_move {
  0%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  50% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
}

@keyframes tail_move {
  0%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  50% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
}