Cara Membuat Emoji Love Bergerak HTML CSS

Hallo sobat program, bertemu kembali dengan saya Rizal dan masih diwebsite Dumet School. Pada kesempatan kali ini kita akan membahas tentang Emoji dan dari banyaknya emoji tsb kita akan membuat salah satunya maka dari itu saya berikan judul Cara Membuat Emoji Love Bergerak HTML CSS.

Sebelumnya saya sudah pernah membahas tentang cara membuat emoji like bergerak, dan saya dipembahasan kali ini tidak jauh berbeda dengan yang sebelumnya tentang emoji. Silahkan teman-teman simak terlebih dahulu disini

Oke langsung saja kita mulai, pertama-tama jalankan/run text-editornya kemudian ketiklah kode HTML seperti dibawah ini :

<div class="emoji  emoji_hati">
  <div class="emoji_cinta"></div>
</div>

Jika sudah, maka langkah selanjutnya teman-teman tambahkan kode STYLE CSS seperti pada contoh dibawah ini :

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_cinta {
  position: absolute;
}

.emoji_cinta:before, .emoji_cinta:after{
  position: absolute;
  content: '';
}
.emoji_hati {
  background: #F55064;
}
.emoji_hati:after {
  content: '';
}
.emoji_hati .emoji_cinta {
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px;
  -webkit-animation: berdetak 1s linear infinite alternate;
          animation: berdetak 1s linear infinite alternate;
}
.emoji_hati .emoji_cinta:before, .emoji_hati .emoji_cinta:after {
  left: calc(50% - 20px);
  top: calc(50% - 32px);
  width: 40px;
  height: 64px;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
}
.emoji_hati .emoji_cinta:before {
  -webkit-transform: translate(20px) rotate(-45deg);
          transform: translate(20px) rotate(-45deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.emoji_hati .emoji_cinta:after {
  -webkit-transform: translate(-20px) rotate(45deg);
          transform: translate(-20px) rotate(45deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

@-webkit-keyframes berdetak {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

@keyframes berdetak {
  25% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

Didalam css diatas saya menggunakan pseudo elemen seperti before after dan animate guna untuk membuat emoji love saat ini.

Cara Membuat Emoji Love Bergerak HTML CSS

Oke dari kedua kode diatas silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan dan jika benar maka hasilnya akan terlihat seperti dibawah ini :

Untuk demo live nya disini >>> DEMO LIVE

Oke kalau begitu seperti itulah contoh Cara Membuat Emoji Love Bergerak HTML CSS semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Membuat Emoji Love Bergerak HTML CSS

Kategori