Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite Dumet School. Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Emoji Tertawa Bergerak HTML CSS yang merupakan lanjutan dari pembahasan saya yang dulu tentang Emoji.
Pada dasarnya sama dengan pembahasan yang sebelumnya, kali ini kita akan membuat emoji tertawa bergerak. Dan tanpa panjang lebar mari simak step-by-step pembuatannya dan source code nya seperti dibawah ini :
Langkah pertama jalankan/run text-editornya kemudian ketiklah kode HTML seperti pada contoh dibawah ini :
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
Jika sudah, langkah selanjutnya teman-teman ketik kode STYLE CSS nya 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__face, .emoji__eyes, .emoji__mouth, .emoji__tongue {
position: absolute;
}
.emoji__face:before, .emoji__face:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after {
position: absolute;
content: '';
}
.emoji__face {
width: inherit;
height: inherit;
}
.emoji--haha:after {
content: '';
}
.emoji--haha .emoji__face {
-webkit-animation: haha-face 2s linear infinite;
animation: haha-face 2s linear infinite;
}
.emoji--haha .emoji__eyes {
width: 26px;
height: 6px;
border-radius: 2px;
left: calc(50% - 13px);
top: 35px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
background: transparent;
box-shadow: -25px 5px 0 0 #000000, 25px -5px 0 0 #000000;
}
.emoji--haha .emoji__eyes:after {
left: 0;
top: 0;
width: 26px;
height: 6px;
border-radius: 2px;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
background: transparent;
box-shadow: -25px -5px 0 0 #000000, 25px 5px 0 0 #000000;
}
.emoji--haha .emoji__mouth {
width: 80px;
height: 40px;
left: calc(50% - 40px);
top: 50%;
background: #000000;
border-radius: 0 0 40px 40px;
overflow: hidden;
z-index: 1;
-webkit-animation: haha-mouth 2s linear infinite;
animation: haha-mouth 2s linear infinite;
}
.emoji--haha .emoji__tongue {
width: 70px;
height: 30px;
background: #F55064;
left: calc(50% - 35px);
bottom: -10px;
border-radius: 50%;
}
@-webkit-keyframes haha-face {
10% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
20% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
30% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
40% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
50% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
70% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
80% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
90% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes haha-face {
10% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
20% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
30% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
40% {
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
50% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
60% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
70% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
80% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
90% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-webkit-keyframes haha-mouth {
10% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
30% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
}
@keyframes haha-mouth {
10% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
20% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
30% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
40% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
top: 45%;
}
50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
top: 45%;
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
70% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
top: 50%;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
top: 50%;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
top: 50%;
}
}
Dari kedua kode diatas jika dijalankan/run dibrowser yang teman-teman gunakan maka hasilnya akan terlihat seperti pada gambar dibawah ini :
Jadi seperti itulah hasil dari pembahasan kita kali ini tentang Cara Membuat Emoji Tertawa Bergerak HTML CSS dan silahkan teman-teman kreasikan lagi yang lebih menarik.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Emoji Tertawa Bergerak HTML CSS semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih
Sumber : codepen.io