Cara Membuat Emoji Face Animated

Kali ini saya memberikan cara membuat emoji face bergerak, hanya menggunakan CSS
script ini buatan oleh Kyle Adams

kalian bisa menerapkan emoji ini ke blog kalian, langsung saja ke benang merahnya

Copy CSS berikut di Blog kalian, pada bagian edit HTML, kalian pasti sudah tau harus letak dimana, jadi tidak perlu disuapi lagi

<style type='text/css'>
.emoji {
  box-sizing: border-box;
  float: left;
}

.face {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 15px 30px 0;
  border-radius: 50%;
  background: #F2DD68;
}

.face:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -8px;
  left: -8px;
  border-radius: 50%;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.07);
}

.eye {
  position: absolute;
  width: 11px;
  height: 11px;
  top: 32px;
  left: 16px;
  z-index: 1;
  border-radius: 50%;
  background: #995710;
}

.eye:last-child {
  left: auto;
  right: 16px;
}

.emoji:hover .eye {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

@keyframes blink {
  10% {
    height: 11px;
    top: 32px;
  }
  30% {
    height: 1px;
    top: 37px;
  }
  50% {
    height: 11px;
    top: 32px;
  }
}

.mouth {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 70px;
  height: 34px;
  margin: 0 auto;
  border-radius: 0 0 70px 70px;
  overflow: hidden;
  background: #995710;
}

.mouth:before,
.mouth:after {
  content: '';
  position: absolute;
  display: block;
}

.mouth.teath:before {
  width: 100%;
  height: 10px;
  z-index: 2;
  background: #fffae6;
}

.mouth.tounge:after {
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  right: 0;
  top: 15px;
  margin: 0 auto;
  border-radius: 50%;
  background: #d8aa2b;
}


/*------ Grin Emoji Styling ------*/

.grin .eye {
  transition: all 0.3s ease-in-out;
}

.grin:hover .eye {
  animation: none;
  height: 2px;
  top: 36px;
}

.grin:hover .mouth {
  animation-name: giggle;
  animation-iteration-count: infinite;
  animation-duration: 0.2s;
}

@keyframes giggle {
  0% {
    transform: translate(0, -1px);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, -1px);
  }
}


/*------ Sad Emoji Styling ------*/

.sad .mouth {
  top: 44px;
  border-radius: 70px 70px 0 0;
}

.sad .mouth:before {
  display: none;
}


/*------ Shocked Emoji Styling ------*/

.shocked .mouth {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.shocked .eye {
  transition: all 0.2s ease-in-out;
}

.shocked:hover .eye {
  animation: none;
  transform: scale(1.3, 1.3);
  transition: all 1.5s ease-out;
}

.shocked:hover .mouth {
  animation-name: wow;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}

@keyframes wow {
  70% {
    transform: scale(0.5, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


/*------ Smiling Emoji Styling ------*/

.smile .mouth {
  width: 50px;
  height: 25px;
  background: transparent;
  border-radius: 0 0 50px 50px;
  border: 4px solid #995710;
  border-top: 0;
  -webkit-clip-path: inset(30% 0 0 0);
  clip-path: inset(30% 0 0 0);
}


/*------ Speechless Emoji Styling ------*/

.speechless .mouth {
  width: 70px;
  height: 4px;
  top: 60px;
  border-radius: 0;
}


/*------ Love Emoji Styling ------*/

.heart-eye {
  position: absolute;
  top: 30px;
  left: 16px;
  transform: rotate(-15deg);
}

.heart-eye:last-child {
  left: auto;
  right: 16px;
  transform: rotate(15deg);
}

.heart {
  display: block;
  width: 16px;
  height: 16px;
  background: #e25d5d;
  transform: rotate(-45deg);
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e25d5d;
}

.heart:before {
  top: -8px;
  left: 0;
}

.heart:after {
  left: 8px;
  top: 0;
}

.love .mouth {
  transform: scale(0.5, 0.5);
}

.love:hover .heart-eye {
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.love:hover .heart-eye:last-child {
  animation-name: pulse-right;
}

@keyframes pulse {
  30% {
    transform: scale(1.1, 1.1) rotate(-15deg);
  }
  70% {
    transform: scale(1, 1) rotate(-15deg);
  }
}

@keyframes pulse-right {
  30% {
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  70% {
    transform: scale(1, 1) rotate(15deg);
  }
}


/*------ Angry Emoji Styling ------*/

.angry .face {
  background: #e25d5d;
  transition: all 500ms ease-in-out;
}

.angry:hover .face {
  background: #e84747;
  animation-name: fuming;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes fuming {
  10% {
    transform: translate(-5px);
  }
  15% {
    transform: translate(5px);
  }
  20% {
    transform: translate(-5px);
  }
  25% {
    transform: translate(5px);
  }
  30% {
    transform: translate(-5px);
  }
  35% {
    transform: translate(5px);
  }
  40% {
    transform: translate(-5px);
  }
  45% {
    transform: translate(5px);
  }
  50% {
    transform: translate(0);
  }
}

.angry .eye,
.angry .eye:before,
.angry .mouth {
  background: #7f2626;
}

.angry .eye:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 5px;
  top: -1px;
  left: -4px;
  transform: rotate(20deg);
}

.angry .eye:last-child:before {
  left: auto;
  right: -4px;
  transform: rotate(-20deg);
}

.angry .mouth {
  width: 20px;
  height: 4px;
  top: 64px;
  border-radius: 0;
}
</style>

Jika sudah,
masukkan kode HTML di bawah ini ke postingan blog kalian, atau terserah kalian ingin meletakkan kode HTML ini dimana, di widget sidebar juga bisa,

<div class="emoji grin">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth teath tounge">
        </span>
      </figure>
    </div>
    <div class="emoji sad">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji shocked">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji laugh">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji smile">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji speechless">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji love">
      <figure class="face">
        <span class="eyes">
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji angry">
      <figure class="face">
        <span class="eyes">
            <span class="eye"></span>
            <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>

Emoji akan bergerak ketika mouse diarahkan ke emot tersebut,
ini menggunakan hover, jadi kalian tidak perlu mengklik emot tersebut, hanya perlu mengarahkan cursor ke arah emot tersebut

Jika kalian ingin mengganti ukurannya, bisa kalian edit CSSnya
kalian hanya perlu mencari width, height atau yg berhubungan dengan ukurannya,
klo gak tau cari digoogle ya

Contoh kalian bisa lihat dibawah

• Hasil