-->
Cara Menciptakan Emoji Face Animated
4/ 5 stars - "Cara Menciptakan Emoji Face Animated" Kali ini aku memperlihatkan cara menciptakan emoji face bergerak, hanya memakai CSS script ini buatan oleh Kyle Adams kalian dapat me...

Cara Menciptakan Emoji Face Animated




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