Kali ini aku memperlihatkan cara menciptakan emoji face bergerak, hanya memakai CSS
script ini buatan oleh Kyle Adams
kalian dapat menerapkan emoji ini ke blog kalian, pribadi saja ke benang merahnya
Copy CSS berikut di Blog kalian, pada bab edit HTML, kalian niscaya 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 isyarat HTML di bawah ini ke postingan blog kalian, atau terserah kalian ingin meletakkan isyarat 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 saat mouse diarahkan ke emot tersebut,
ini memakai hover, jadi kalian tidak perlu mengklik emot tersebut, hanya perlu mengarahkan cursor ke arah emot tersebut
Jika kalian ingin mengganti ukurannya, dapat kalian edit CSSnya
kalian hanya perlu mencari width, height atau yg bekerjasama dengan ukurannya,
klo gak tau cari digoogle ya
Contoh kalian dapat lihat dibawah
