Cara Membuat Emoji Like Bergerak HTML dan CSS

Hallo sobat program, Alhamdulilah masih diberikan kesehatan dan dapat bertemu kembali dengan saya Rizal dan masih diwebsite Dumet School. Dipembahasan kali ini saya akan memberikan contoh Cara Membuat Emoji Like Bergerak HTML dan CSS.

Sebelum kita mulai, saya harap teman-teman sudah mengenal lebih tentang HTML dan CSS serta animasi CSS seperti keyframes dll. Karena pada tutorial kali ini kita lebih menggunakan animasi untuk menggerakannya.

Oke pada dasarnya design tentang website itu banyak sekali tergantung dari diri kita sendiri bagaimana cara untuk berkreativ dari kode kode yang sudah disediakan oleh html dan css. Berikut ini adalah gambar contoh-contoh emoji :

Dari beberapa emoji diatas merupakan contoh dan kita tidak membuat salah satu dr gambar diatas, melainkan kita akan membuat Emoji Like Bergerak sesuai pada judul kita ini tentang Cara Membuat Emoji Like Bergerak HTML dan CSS.

Oke tanpa panjang lebar lagi mari kita mulai, Langkah pertama jalankan/run text-editornya kemudian ketiklah kode HTML seperti pada gambar dibawah ini :

<div class="emoji  emoji--like">
  <div class="emoji__lengan">
      <div class="emoji__jempol"></div>
  </div>
</div>

Jika sudah dengan HTML nya maka langkah selanjutnya kita berikan style CSS seperti pada kode dibawah ini :

Cara Membuat Emoji Like Bergerak HTML dan CSS.

body {
  text-align: center;
  margin: 80px auto 0;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.emoji {
  width: 120px;
  height: 120px;
  margin: 15px 15px 40px;
  background: #FFDA6A;
  display: inline-block;
  border-radius: 50%;
  position: relative;
}
.emoji:after {
  position: absolute;
  bottom: -40px;
  font-size: 18px;
  width: 60px;
  left: calc(50% - 30px);
  color: #8A8A8A;
}

.emoji__lengan, .emoji__jempol {
  position: absolute;
}
.emoji__lengan:before, .emoji__lengan:after, .emoji__jempol:before, .emoji__jempol:after {
  position: absolute;
  content: '';
}

.emoji--like {
  background: #548DFF;
}
.emoji--like:after {
  content: '';
}
.emoji--like .emoji__lengan {
  left: 25px;
  bottom: 30px;
  width: 20px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 5px;
  z-index: 0;
  -webkit-animation: lengan-up 2s linear infinite;
          animation: lengan-up 2s linear infinite;
}
.emoji--like .emoji__lengan:before {
  left: 25px;
  bottom: 5px;
  width: 40px;
  background: inherit;
  height: 10px;
  border-radius: 2px 10px 10px 2px;
  box-shadow: 1px -9px 0 1px #FFFFFF, 2px -19px 0 2px #FFFFFF, 3px -29px 0 3px #FFFFFF;
}
.emoji--like .emoji__jempol {
  border-bottom: 20px solid #FFFFFF;
  border-left: 20px solid transparent;
  top: -25px;
  right: -25px;
  z-index: 2;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-animation: jempol-up 2s linear infinite;
          animation: jempol-up 2s linear infinite;
}
.emoji--like .emoji__jempol:before {
  border-radius: 50% 50% 0 0;
  background: #FFFFFF;
  width: 10px;
  height: 12px;
  left: -10px;
  top: -8px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  box-shadow: -1px 4px 0 -1px #FFFFFF;
}

@-webkit-keyframes lengan-up {
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg) translateY(-10px);
            transform: rotate(-15deg) translateY(-10px);
  }
  75%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes lengan-up {
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg) translateY(-10px);
            transform: rotate(-15deg) translateY(-10px);
  }
  75%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes jempol-up {
  25% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50%, 100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@keyframes jempol-up {
  25% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50%, 100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

Oke dari kedua kode diatas maka hasil akhirnya akan menjadi seperti pada gambar dibawah ini :

Untuk demo live nya bisa lihat disini >>> DEMO LIVE

Bagaimana ? mudah ya teman-teman. Jadi seperti itulah contoh kreasi dari kode html dan css dalam membuat emoji like bergerak.

Oke kalau begitu saya rasa cukup sampai disini pembahasan kita tentang Cara Membuat Emoji Like Bergerak HTML dan CSS. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih