Minion in Pure CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

apa kabar semua ? ^_^
berjumpa lagi dengan saya, admin codingpintar ^_^

semoga sehat semua yah, dan masih semangat untuk belajar codingnya heheh ^_^

pada tutorial sebelumnya kita sudah membuat Animasi Minion Dengan CSS3

nah, pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Karakter Dengan CSS3
Karakter yang saya buat kali ini yaitu Karakter Minion
Karakter ini hanya menggunakan css3, seperti tutorial sebelumnya karakter ini bukan buatan saya melainkan web developer yang bernama Rachel Bull karya dia sengaja saya share disini agar kita semua bisa tau cara membuat karakter dengan css3.
tidak usah nerlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
seperti tutorial sebelumnya silahkan siapkan file HTML bernama index.html, lalu ketikkan script berikut ini .

<!DOCTYPE html>
<html>
<head>
 <title>Minion</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
 <h1>Minion in Pure CSS</h1>
 <div class="minion">
  <ul class="hair back">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  <div class="minion-body">
   <div class="dungarees-bottom"></div>
   <div class="dungarees-front"></div>
   <div class="dungarees-pocket">
    <div class="logo"><span></span></div>
   </div>
   <div class="dungarees-strap left">
    <div class="button"></div>
   </div>
   <div class="dungarees-strap right">
    <div class="button"></div>
   </div>
  </div>
  <ul class="hair front">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  <div class="goggle-strap left"></div>
  <div class="goggle-strap right"></div>
  <div class="goggle-strap-link left"></div>
  <div class="goggle-strap-link right"></div>
  <div class="goggle-frame left">
   <div class="goggle">
    <div class="eye">
     <div class="pupil">
      <div class="dot"></div>
     </div>
    </div>
   </div>
  </div>
  <div class="goggle-frame right">
   <div class="goggle">
    <div class="eye">
     <div class="pupil">
      <div class="dot"></div>
     </div>
    </div>
   </div>
  </div>
  <div class="goggle-shadow left"></div>
  <div class="goggle-shadow right"></div>
  <div class="mouth"></div>
  <div class="arm-shadow left"></div>
  <div class="arm-shadow right"></div>
  <div class="arm left"></div>
  <div class="arm right"></div>
  <div class="glove left">
   <div class="finger"></div>
  </div>
  <div class="glove right">
   <div class="finger"></div>
  </div>
  <div class="wrist front left"></div>
  <div class="wrist front right"></div>
  <div class="wrist back left"></div>
  <div class="wrist back right"></div>
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shoe left"></div>
  <div class="shoe right"></div>
  <div class="shadow"></div>
 </div>
</div>
</body>
</html>

Jika file HTMLnya sudah di buat silahkan ikuti langkah yang ke dua.

2. Membuat File CSS
ini dia bagian atau (file) yang terpenting hehehe, silahkan buat file cssnya bernama style.css, dan ketikkan script berikut .

:before, :after {
  content: "";
  position: absolute;
}

.container {
  min-width: 300px;
  margin: 15px auto;
  padding: 0 20px;
  height: 450px;
  box-sizing: border-box;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
.container h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #666666;
  font-size: 40px;
  text-align: center;
}

.minion {
  position: relative;
  height: 250px;
  width: 140px;
  margin: 0 auto;
}
.minion * {
  position: absolute;
}
.minion .hair {
  top: -15px;
  margin: 0;
  padding: 0;
}
.minion .hair.back li:nth-of-type(1) {
  -ms-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
  margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
  -ms-transform: rotate(-50deg);
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
  -ms-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  border-left: 1px solid #333333;
  border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
  -ms-transform: rotate(70deg);
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
  margin-top: 36px;
}
.minion .hair.front {
  margin-top: 3px;
  z-index: 4;
}
.minion .hair.front li:nth-of-type(1) {
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  margin-top: 21px;
}
.minion .hair.front li:nth-of-type(2) {
  -ms-transform: rotate(-46deg);
  -webkit-transform: rotate(-46deg);
  transform: rotate(-46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(3) {
  -ms-transform: rotate(-28deg);
  -webkit-transform: rotate(-28deg);
  transform: rotate(-28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(4) {
  -ms-transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  transform: rotate(-12deg);
  margin-top: 5px;
}
.minion .hair.front li:nth-of-type(5) {
  -ms-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
  border-right: 1px solid #333333;
  border-radius: 0 80% 0 0;
  margin-top: 3px;
}
.minion .hair.front li:nth-of-type(6) {
  -ms-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
  margin-top: 6px;
}
.minion .hair.front li:nth-of-type(7) {
  -ms-transform: rotate(28deg);
  -webkit-transform: rotate(28deg);
  transform: rotate(28deg);
  margin-top: 7px;
}
.minion .hair.front li:nth-of-type(8) {
  -ms-transform: rotate(46deg);
  -webkit-transform: rotate(46deg);
  transform: rotate(46deg);
  margin-top: 12px;
}
.minion .hair.front li:nth-of-type(9) {
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  margin-top: 21px;
}
.minion .hair li {
  list-style: none;
  height: 30px;
  width: 10px;
  float: left;
}
.minion .hair li:nth-of-type(1) {
  -ms-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
  position: absolute;
  left: 8px;
  height: 30px;
}
.minion .hair li:nth-of-type(2) {
  -ms-transform: rotate(-50deg);
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  left: 18px;
}
.minion .hair li:nth-of-type(3) {
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  left: 30px;
}
.minion .hair li:nth-of-type(4) {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  left: 45px;
}
.minion .hair li:nth-of-type(5) {
  left: 60px;
}
.minion .hair li:nth-of-type(6) {
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  left: 76px;
}
.minion .hair li:nth-of-type(7) {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  left: 93px;
}
.minion .hair li:nth-of-type(8) {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  left: 107px;
}
.minion .hair li:nth-of-type(9) {
  -ms-transform: rotate(70deg);
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
  left: 119px;
  height: 30px;
}
.minion .hair li:nth-of-type(n+6) {
  border-left: 1px solid #333333;
  border-radius: 80% 0 0 0;
}
.minion .hair li:nth-of-type(-n+4) {
  border-right: 1px solid #333333;
  border-radius: 0 80% 0 0;
}
.minion .minion-body {
  position: relative;
  height: 250px;
  width: 140px;
  border-radius: 80px 80px 50px 50px;
  background: #FFCB4F;
  overflow: hidden;
}
.minion .minion-body:after, .minion .minion-body:before {
  top: 0;
  left: 0;
}
.minion .minion-body:before {
  width: 80%;
  height: 100%;
  border-radius: 20px;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFF4E097', endColorstr='#FFFFFFFF');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjQwJSIgY3k9IjMwJSIgcj0iNjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmFmYWZhIiBzdG9wLW9wYWNpdHk9IjAuNiIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmFmYWZhIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(40% 30%, ellipse cover, rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
  background-image: -webkit-radial-gradient(40% 30%, ellipse cover, rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
  background-image: radial-gradient(ellipse cover at 40% 30%, rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
  filter: blur(5px);
  z-index: 1;
}
.minion .minion-body:after {
  height: 250px;
  width: 140px;
  border-radius: 80px 80px 50px 50px;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF000000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(70%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.2)));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
  filter: blur(5px);
  z-index: 1;
}
.minion .minion-body .dungarees-front {
  bottom: 0;
  height: 90px;
  width: 140px;
  overflow: hidden;
  border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-front:before {
  left: -30px;
  border-radius: 0 0 35% 0;
  box-shadow: 40px -40px 30px 40px #6D9CC6;
}
.minion .minion-body .dungarees-front:after {
  right: -30px;
  box-shadow: -40px -40px 30px 40px #6D9CC6;
  border-radius: 0 0 0 35%;
}
.minion .minion-body .dungarees-front:before, .minion .minion-body .dungarees-front:after {
  width: 56px;
  height: 75%;
  top: 0;
  border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket {
  bottom: 35px;
  left: 50%;
  margin-left: -17.5px;
  height: 35px;
  width: 35px;
  border-radius: 0 0 15px 15px;
  border-left: 1px solid #4883b8;
  border-right: 1px solid #4883b8;
  border-bottom: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket:before {
  top: -13px;
  left: -2px;
  height: 15px;
  width: 37px;
  border-bottom: 1px solid #4883b8;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 20px;
}
.minion .minion-body .dungarees-pocket .logo {
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -10.5px;
  height: 25px;
  width: 25px;
  background: #333333;
  border-radius: 50%;
}
.minion .minion-body .dungarees-pocket .logo:before {
  top: 50%;
  left: 50%;
  margin-left: -7.5px;
  margin-top: -7.5px;
  height: 15px;
  width: 15px;
  background: #6D9CC6;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.minion .minion-body .dungarees-pocket .logo:after {
  top: 50%;
  left: 50%;
  margin-left: -3.5px;
  margin-top: -3.5px;
  height: 7px;
  width: 7px;
  background: #333333;
  border-radius: 50%;
  z-index: 5;
}
.minion .minion-body .dungarees-pocket .logo span {
  height: 2px;
  background: #333333;
  border-bottom: 1px solid #6D9CC6;
  width: 12.5px;
  right: 0;
  top: 48%;
  margin-top: -1px;
  z-index: 6;
}
.minion .minion-body .dungarees-bottom {
  bottom: 0;
  height: 40px;
  width: 140px;
  background-color: #6d9cc6;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF6D9CC6', endColorstr='#FF4B6587');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiM2ZDljYzYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YjY1ODciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(45%, #6d9cc6), color-stop(100%, #4b6587));
  background-image: -moz-linear-gradient(top, #6d9cc6 45%, #4b6587 100%);
  background-image: -webkit-linear-gradient(top, #6d9cc6 45%, #4b6587 100%);
  background-image: linear-gradient(to bottom, #6d9cc6 45%, #4b6587 100%);
  border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap {
  top: 127px;
  height: 60px;
  width: 12px;
  background: #6D9CC6;
  border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap.left {
  left: 5px;
  -ms-transform: rotate(-65deg);
  -webkit-transform: rotate(-65deg);
  transform: rotate(-65deg);
}
.minion .minion-body .dungarees-strap.right {
  right: 5px;
  -ms-transform: rotate(65deg);
  -webkit-transform: rotate(65deg);
  transform: rotate(65deg);
}
.minion .minion-body .dungarees-strap .button {
  bottom: 0;
  left: 2px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #333333;
}
.minion .goggle-strap {
  top: 68px;
  height: 3px;
  background: black;
  width: 16px;
  z-index: 6;
}
.minion .goggle-strap.left {
  left: -2px;
}
.minion .goggle-strap.left:before, .minion .goggle-strap.left:after {
  border-right: 16px solid #444444;
}
.minion .goggle-strap.right {
  right: -2px;
}
.minion .goggle-strap.right:before, .minion .goggle-strap.right:after {
  border-left: 16px solid #444444;
}
.minion .goggle-strap:before, .minion .goggle-strap:after {
  height: 6px;
}
.minion .goggle-strap:before {
  top: -7px;
  border-top: 2px solid transparent;
}
.minion .goggle-strap:after {
  top: 3px;
  border-bottom: 2px solid transparent;
}
.minion .goggle-strap-link {
  top: 58px;
  height: 25px;
  width: 5px;
  background: #999999;
  z-index: 7;
}
.minion .goggle-strap-link.left {
  left: 12px;
}
.minion .goggle-strap-link.right {
  right: 12px;
}
.minion .goggle-frame {
  top: 40px;
  height: 50px;
  width: 50px;
  border: 5px solid #CCCCCC;
  border-radius: 50%;
  overflow: hidden;
  z-index: 8;
}
.minion .goggle-frame.left {
  left: 30%;
  margin-left: -30px;
}
.minion .goggle-frame.left .goggle {
  left: -1px;
}
.minion .goggle-frame.left .goggle .pupil {
  right: 40%;
}
.minion .goggle-frame.right {
  right: 30%;
  margin-right: -30px;
}
.minion .goggle-frame.right .goggle {
  right: -1px;
}
.minion .goggle-frame.right .goggle .pupil {
  left: 40%;
}
.minion .goggle-frame .goggle {
  height: 50px;
  width: 50px;
  border: 3px solid #666666;
  border-radius: 50%;
}
.minion .goggle-frame .goggle .eye {
  background: whitesmoke;
  height: 46px;
  width: 50px;
  border-radius: 50%;
  margin: 1px 0;
  -webkit-box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
  -moz-box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
  box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
}
.minion .goggle-frame .goggle .eye .pupil {
  top: 50%;
  margin: -7.5px;
  height: 15px;
  width: 15px;
  background-color: #e7a452;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFE7A452', endColorstr='#FF000000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTklIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTdhNDUyIi8+PHN0b3Agb2Zmc2V0PSI0OSUiIHN0b3AtY29sb3I9IiM5MTY5NWMiLz48c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzkxNjk1YyIvPjxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, #e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
  background-image: -webkit-radial-gradient(center, ellipse cover, #e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
  background-image: radial-gradient(ellipse cover at center, #e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
  border-radius: 50%;
}
.minion .goggle-frame .goggle .eye .pupil .dot {
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  margin-left: -2.5px;
  height: 5px;
  width: 5px;
  background: #333333;
  border-radius: 50%;
}
.minion .goggle-shadow {
  height: 75px;
  top: 45px;
  border-radius: 50%;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF000000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iNTAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuOCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  background-image: radial-gradient(ellipse cover at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 5;
}
.minion .goggle-shadow.left {
  left: 5px;
  width: 130px;
}
.minion .goggle-shadow.right {
  left: 55px;
  width: 100px;
}
.minion .mouth {
  top: 110px;
  left: 50%;
  margin-left: -30px;
  height: 20px;
  width: 60px;
  border-bottom: 2px solid #DE9A33;
  border-right: 1px solid tranparent;
  border-left: 1px solid tranparent;
  border-radius: 70%;
  z-index: 5;
  -webkit-box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
}
.minion .arm {
  top: 160px;
  height: 80px;
  width: 12px;
  z-index: -1;
  background: #FFCB4F;
  overflow: hidden;
}
.minion .arm.left {
  left: -12px;
  border-radius: 20px 0 0 20px / 80px 0 0 20px;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.minion .arm.left:before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNmYWZhZmEiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(20%, rgba(250, 250, 250, 0.3)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(to right, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
}
.minion .arm.right {
  right: -12px;
  border-radius: 0 20px 20px 0 / 0 80px 20px 0;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.minion .arm.right:before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(90%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.minion .arm:before {
  height: 100%;
  width: 100%;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF000000', endColorstr='#FF000000');
}
.minion .arm-shadow {
  top: 180px;
  height: 30px;
  width: 5px;
  border-radius: 50%;
}
.minion .arm-shadow.left {
  left: 0px;
  -webkit-box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}
.minion .arm-shadow.right {
  right: 0px;
  -webkit-box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.minion .glove {
  bottom: 0;
  width: 17px;
  height: 18px;
  background: #333333;
  border-radius: 0 0 30px 30px;
}
.minion .glove.left {
  left: -14px;
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.minion .glove.left:before {
  left: -2px;
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.minion .glove.left:after {
  left: 13px;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.minion .glove.left .finger {
  left: 5px;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.minion .glove.right {
  right: -14px;
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
.minion .glove.right:before {
  right: -2px;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.minion .glove.right:after {
  right: 13px;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.minion .glove.right .finger {
  right: 5px;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.minion .glove:before {
  bottom: 0px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
}
.minion .glove:after {
  bottom: -4px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
}
.minion .glove .finger {
  bottom: -6px;
  height: 20px;
  width: 10px;
  background: #333333;
  border-radius: 0 0 20px 20px;
  z-index: 10;
}
.minion .wrist {
  height: 30px;
  width: 16px;
  border-radius: 40%;
}
.minion .wrist.front {
  bottom: 15px;
  border-bottom: 5px solid #333333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.minion .wrist.back {
  bottom: -11px;
  border-top: 5px solid #333333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  z-index: -2;
}
.minion .wrist.left {
  left: -19px;
}
.minion .wrist.right {
  right: -19px;
}
.minion .leg {
  bottom: -15px;
  height: 15px;
  width: 25px;
  background: #4B6587;
  z-index: -1;
  border-left: 1px solid #4883b8;
  border-right: 1px solid #4883b8;
}
.minion .leg.left {
  left: 40px;
  border-radius: 0 0 10% 20% / 0 0 80% 80%;
}
.minion .leg.left:after {
  -ms-transform: rotate(55deg);
  -webkit-transform: rotate(55deg);
  transform: rotate(55deg);
  left: -12px;
}
.minion .leg.right {
  right: 40px;
  border-radius: 0 0 20% 10% / 0 0 80% 80%;
}
.minion .leg.right:after {
  -ms-transform: rotate(-55deg);
  -webkit-transform: rotate(-55deg);
  transform: rotate(-55deg);
  right: -12px;
}
.minion .leg:after {
  top: -10px;
  background: #4B6587;
  height: 10px;
  width: 20px;
  border-bottom: 1px solid #4883b8;
}
.minion .shoe {
  bottom: -26px;
  width: 30px;
  height: 10px;
  background: #222222;
  z-index: -2;
}
.minion .shoe.left {
  right: 74px;
  border-radius: 50px 20px 15px 10px;
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.minion .shoe.left:before {
  right: 0px;
}
.minion .shoe.left:after {
  right: 0;
  border-radius: 10px 0 0 10px;
}
.minion .shoe.right {
  left: 74px;
  border-radius: 20px 50px 10px 15px;
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}
.minion .shoe.right:before {
  left: 0px;
}
.minion .shoe.right:after {
  left: 0;
  border-radius: 0 10px 10px 0;
}
.minion .shoe:before {
  top: -10px;
  height: 15px;
  width: 22px;
  background: #222222;
}
.minion .shoe:after {
  bottom: -3px;
  height: 3px;
  width: 30px;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF666666', endColorstr='#FF222222');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjMjIyMjIyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(58%, #222222));
  background-image: -moz-linear-gradient(top, #666666 0%, #222222 58%);
  background-image: -webkit-linear-gradient(top, #666666 0%, #222222 58%);
  background-image: linear-gradient(to bottom, #666666 0%, #222222 58%);
}
.minion .shadow {
  bottom: -24px;
  left: 20px;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-125px);
  -moz-transform: rotateX(90deg) translateZ(-125px);
  -ms-transform: rotateX(90deg) translateZ(-125px);
  -o-transform: rotateX(90deg) translateZ(-125px);
  transform: rotateX(90deg) translateZ(-125px);
  z-index: -5;
}

dilihat dari scriptnya ternyata lebih banyak membuat karakter ya di banding animasi hehehe, jika semua file sudah di buat silahkan jalankan file index.html
dan lihat apa yang terjadi di browsermu :D

mohon maaf jika tidak ada demonya hehe :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ