Hallo sobat program, bertemu kembali dengan saya Rizal. Pada kesempatan kali ini kita masih membahas seputar emoji menggunakan html css dan saya akan berikan judul artikel kali ini adalah Cara Membuat Emoji Senyum dengan HTML dan CSS.
Sebelum kita memulainya teman-teman baca terlebih dahulu artikel saya yang sebelumnya tentang emoji dan saya harap teman-teman sudah menguasai HTML dan CSS animation agar dapat dengan mudah memahami dipembahasan kali ini.
Oke langsung saja tanpa basa-basi, teman-teman jalankan/run text-editornya kemudian teman-teman ketik/copy script HTML nya seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 |
<div class="emoji emoji--yay"> <div class="emoji__face"> <div class="emoji__eyebrows"></div> <div class="emoji__mouth"></div> </div> </div> |
Jika sudah dengan HTML nya, langkah selanjutnya teman-teman tambahkan script atau kode STYLE CSS nya seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
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__eyebrows, .emoji__mouth { position: absolute; } .emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before { position: absolute; content: ''; } .emoji__face { width: inherit; height: inherit; } .emoji--yay:after { content: ''; -webkit-animation: yay-reverse 1s linear infinite; animation: yay-reverse 1s linear infinite; } .emoji--yay .emoji__face { -webkit-animation: yay 1s linear infinite alternate; animation: yay 1s linear infinite alternate; } .emoji--yay .emoji__eyebrows { left: calc(50% - 3px); top: 30px; height: 6px; width: 6px; border-radius: 50%; background: transparent; box-shadow: -6px 0 0 0 #000000, -36px 0 0 0px #000000, 6px 0 0 0 #000000, 36px 0 0 0px #000000; } .emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after { width: 36px; height: 18px; border-radius: 60px 60px 0 0; background: transparent; border: 6px solid black; box-sizing: border-box; border-bottom: 0; bottom: 3px; left: calc(50% - 18px); } .emoji--yay .emoji__eyebrows:before { margin-left: -21px; } .emoji--yay .emoji__eyebrows:after { margin-left: 21px; } .emoji--yay .emoji__mouth { top: 60px; background: transparent; left: 50%; } .emoji--yay .emoji__mouth:after { width: 80px; height: 80px; left: calc(50% - 40px); top: -75px; border-radius: 50%; background: transparent; border: 6px solid #000000; box-sizing: border-box; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; z-index: 1; } .emoji--yay .emoji__mouth:before { width: 6px; height: 6px; background: transparent; border-radius: 50%; bottom: 5px; left: calc(50% - 3px); box-shadow: -25px 0 0 0 #000000, 25px 0 0 0 #000000, -35px -2px 30px 10px #D5234C, 35px -2px 30px 10px #D5234C; } @-webkit-keyframes yay { 25% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @keyframes yay { 25% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 75% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } |
Hasil dari kedua kode diatas jika dijalankan maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Untuk demo livenya disini >> DEMO Live
Seperti itulah contoh hasil dari pembahasan kita kali ini tentang Cara Membuat Emoji Senyum dengan HTML dan CSS. semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
sumber : codepen.io
Terimakasih