Aneka Ragam Ekspresi Katak dalam Icon Emoji dengan CSS

agung wisudhatama December 15, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

KATAK dalam bahasa latin Anura, yang berarti An adalah Tanpa dan Oura adalah Ekor. Dalam bahasa Inggris adalah Frog. Dalam bahasa jawa adalah Kodok atau Bangkong. Jadi bila diterjemahkan adalah seekor binatang tanpa ekor. Maksudnya mungkin demikian.

Katak adalah binatang Amphibi, dapat hidup di dunia alam, darat dan air. Katak termasuk pemakan serangga yang hidup di air tawar atau di daratan, berkulit licin, berwarna hijau atau merah kecokelat-cokelatan, kaki belakang lebih panjang, pandai melompat dan berenang.

Di hutan Amazon yang masih liar, terdapat katak beracun dan kerap kali digunakan sebagai racun mematikan pada mata panah pada senjata suku pedalaman Amazon. Sekali kena, maka akan menderita kesakitan yang amat sangat, dan berakhir dengan kematian yang mengerikan.

Baca Juga :

• Memadukan HTML dan CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Ini dia video Katak :

@nothing.to.smile.bout Frogs are G’s #motivation #motivationalvideo ♬ original sound - 😶

Tapi sekarang kita berbicara tentang emoji. Sebuah icon yang memperlihatkan berbagai ekspresi. Dan emoji itu kita ambil dari hewan katak. Emoji (絵文字, atau えもじ) (dibaca eh-moh-ji) adalah istilah bahasa Jepang untuk karakter gambar atau emoticon yang digunakan dalam pesan elektronik Jepang dan halaman Web. Awalnya berarti pictograph, kata harfiah yang berarti “gambar” (e) + “huruf” (Moji).

Meskipun awalnya hanya tersedia di Jepang, beberapa set karakter Emoji telah dimasukkan ke Unicode, yang memungkinkan Emoji untuk digunakan di luar Jepang. Dan emoji telah berkembang pesat hingga saat ini dan dapat digunakan dalam berbagai perangkat elektronik serta multimedia.

Jadi ceritanya dalam tutorial ini saya memberikan gambaran tentang katak dan juga emoji. Karena nanti kedua-duanya memang saling berkaitan. Emoji kodok saya gambarkan dengan jelas dari keterangannya hingga cara pembuatan nantinya. Supaya tidak membuat bingung saya berikan penjelasan saja untuk keduanya. Ini dia beberapa karakter emoji :

01. Wajah Tersenyum Sambil Memeluk (🤗)
02. Wajah Tersenyum dengan Mata Tersenyum (😊)
03. Wajah Tersenyum seperti Malaikat (😇)
04. Wajah Tersenyum Sedikit (🙂)
05. Wajah Terbalik (🙃)
06. Wajah dan Mata Tersenyum dengan Tiga Hati (🥰)
07. Wajah Mengirim Ciuman (😘)
08. Wajah Datar Mengirim Ciuman (😗)
09. Wajah Konyol (🤪)
10. Wajah dengan Tangan Menutupi Mulut (🤭)
11. Wajah Tanpa Mulut (😶)
12. Wajah Menguap (🥱)
13. Wajah Meneteskan Air Liur (🤤)
14. Wajah Pusing (😵)
15. Wajah Bersin (🤧)
16. Wajah Badut (🤡)
17. Tengkorak (💀)
18. Wajah Kaget dengan Kepala Meledak (🤯)
19. Wajah Termenung (😔)
20. Muka sedang Muntah (🤮)
21. Muka sedang Muntah (🤮)
22. Wajah Menangis Keras (😭)
23. Muka Cemberut (😡)
24. Wajah dengan Lidah Keluar (😋)
25. Wajah Kepanasan (🥵)
26. Wajah Memerah (😳)
27. Wajah Tersenyum dengan Tanduk (😈)
28. Wajah dengan Mata Tidak Rata dan Mulut Bergelombang (🥴)
29. Wajah Sedih Tapi Lega (😥)
30. Tangan Menepuk Wajah (🤦)

Itu dia beberapa ekspresi emoticon yang beredar di dunia maya. Tentunya masih banyak lagi ya

Baca Juga :

• Menampilkan dan Membaca Langsung File PDF di Blog
• Memasang Musik Player di Blogspot dengan Teknik Pemrograman CSS3
• Memasang Tombol Download Film DraKor dan Keterangannya

Sejarah

Emoji pertama diciptakan pada tahun 1999 oleh Shigetaka Kurita, yang merupakan bagian dari tim yang sedang mengerjakan platform Internet seluler i-mode milik NTT DoCoMo. Set pertama 172 emoji 12×12 piksel diciptakan sebagai bagian dari fitur perpesanan i-mode untuk membantu memfasilitasi komunikasi elektronik, dan berfungsi sebagai fitur yang membedakannya dari layanan lain.

Namun, pada tahun 1997 Nicolas Loufrani menyadari perkembangan dalam penggunaan emoticon ASCII dalam teknologi seluler dan ia mulai bereksperimen dengan wajah smiley animasi, dengan maksud menciptakan ikon warna-warni yang terkait dengan emoticon ASCII yang sebelumnya sudah ada yang dibuat dari tanda baca polos, guna meningkatkannya untuk penggunaan yang lebih interaktif dalam bentuk digital.

Kode Emoji

Setiap encode yang berbeda, memiliki gambar ikon yang berbeda tetapi masih dalam ikon yang standar. Pada DoCoMo, Unicode (karakter atau huruf dalam bentuk Unicode) U+E63E merupakan representasi dari ikon matahari, tetapi pada SoftBank, ikon matahari memiliki unicode yang berbeda, yaitu U+E04A. Ini yang menyebabkan beberapa perangkat atau halaman Web yang memiliki pengkodean berbeda menjadi tidak konsisten dalam menampilkan Emoji, sehingga yang ditampilkan adalah emoji yang berbeda atau tidak muncul sama sekali.

Untuk NTT DoCoMo i-mode, setiap simbol Emoji diambil pada 12 x 12 kotak pixel. Ketika ditransmisikan, simbol Emoji ditetapkan sebagai urutan dua-byte, di penggunaan pribadi kisaran E63E melalui E575 di dalam ruang karakter Unicode, atau F89F melalui F9FC untuk Shift-JIS. Spesifikasi dasar memiliki 176 simbol, dengan 76 lainnya ditambahkan dalam ponsel yang mendukung C-HTML 4.0.

Standar Unicode

Beratus-ratus karakter Emoji telah melewati pengkodean dalam standar Unicode versi 6.0 yang rilis pada Oktober 2010. Beberapa tambahan, yang diminta oleh Google (Kat Momoi, Mark Davis, dan Markus Scherer menuliskan rangkaian draf permohonan pertama oleh Unicode Technical Committee pada Agustus 2007) dan Apple Inc.

(Yasuo Kida dan Peter Edberg bergabung pada proposal pertama pada UCT atas 607 karakter pada Januari 2009), mereka melewati tahapan panjang dan kritik dari anggota Unicode Consortium, serta penstandardisasi nasional dari berbagai Negara yang berpartisipasi dalam ISO/IEC JTC/SC2/WG2, khususnya Amerika Serikat, Jerman, Irlandia (dipimpin oleh Michael Everson), serta Jepang.

Emoji Kodok CSS

Sekarang saatnya utak-atik template lagi. Masih sama dengan tutorial yang sudah-sudah. Saatnya kita membuat emoji kodok tampil pada display blog kita. Apakah kodoknya dapat hidup dan meloncat di beranda blog kita? tentu tidak. Apakah ada kodok yang mengorek dan bernyanyi pada background blog kita? tidak juga. Tapi akan ada beberapa ekspresi kodok yang akan tampil pada blog kita dan itu semua murni menggunakan CSS. Saatnya kita berkreasi aja ya.

Ini dia caranya :

Caranya adalah sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut

//variables
$bg-color: #F1FFE6;
$frog-color: #A3D768;
$frog-dark-color: #3F6A34;
$light-color: #fff;
$pink-color: #F7D2C9;
$dark-pink-color: #C71F1C;
$tear-bg: #5cfee9;

//mixins
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

* {
  padding: 0px;
  margin: 0px;
}

/* common styles !!!YOU DON'T NEED THEM */

body {
  background-color: $bg-color;
}

.container {
  width: 950px;
  margin: 70px auto 0px auto;
  text-align: center;
  
  h1 {
    font: {
      family: 'Slabo 27px', serif;
      size: 35px;
    }
    color: #2d4427;
    margin-bottom: 50px;
    
    span {
      position: relative;
      font: {
        family: 'Gloria Hallelujah', cursive;
      }
      
      &:before {
        content: "^";
        @include position-absolute($top: 10px, $right: 40px)
      }
      
      &:after {
        content: "^";
        @include position-absolute($top: 10px, $right: 22px)
      }
    }
  }
  
  .emoji-container {
    display: flex;
    justify-items: center;
    align-items: flex-start;
    flex-wrap: wrap;
    
    .icon {
      margin-right: 40px;
      margin-bottom: 40px;
      
      &:nth-child(6n) {
        margin-right: 0px;
      }
    }
  }
}

/* icon main styles !!!YOU NEED THEM */

.icon {
  width: 125px;
  height: 120px;
  position: relative;
  
  //frog styles
  .frog {
    @include position-absolute($top: 0, $left: 0);
    width: 100%;
    height: 100%;
    
    //frog body
    .body {
      width: 110px;
      height: 86px;
      background-color: $frog-color;
      border-radius: 50%;
      @include position-absolute($top: 25px, $right: 0, $left: 0);
      margin: auto;
      box-shadow: 4px 4px 0px 0px rgba($frog-color,0.3);
      
      .mouth {
        margin: auto;
      }
      
      .big-mouth {
        width: 30px;
        height: 20px;
        border-radius: 0 0 50% 50%;
        box-shadow: 2px 2px 0px 0px rgba($frog-dark-color,0.3);
      }
      
      .blush {
        width: 75px;
        height: 9px;
        @include position-absolute($top: 20px, $right: 0, $left: 0);
        margin: auto;

        &:before,
        &:after {
          content: "";
          display: block;
          width: 12px;
          height: 100%;
          background-color: $pink-color;
          border-radius: 50%;
        } 

        &:before {
          @include position-absolute($top: 0, $left: 0);
        }

        &:after {
          @include position-absolute($top: 0, $right: 0);
        }
      }
    }
    
    //frog eyes
    .eyes {
      width: 86px;
      height: 35px;
      @include position-absolute($top: 8px, $right: 0, $left: 0);
      margin: auto;
      
      .eye {
        width: 35px;
        height: 35px;
        
        &:before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: $frog-color;
          border-radius: 50%;
        }
        
        &.wink {
          
          $wink-width: 17px;
          
          .eye-inner {
            background-color: transparent;
            width: $wink-width;
            height: 3px;
            background-color: $frog-dark-color;
            border-radius: 0;
            @include position-absolute($top: 15px, $left: 0, $right: 0);
            margin: auto;
            transform: rotate(21deg);
            
            &:before,
            &:after {
              content: '';
              display: block;
              width: $wink-width;
              height: 3px;
              background-color: $frog-dark-color;
            }
            
            &:before {
              transform: rotate(25deg);
              @include position-absolute($top: -4px, $left: 0);
            }
            
            &:after {
              transform: rotate(-25deg);
              @include position-absolute($top: 4px, $left: 0);
            }
          }
          
          .pupil {
            display: none;
          }
        }
        
        &.extra-light {
          
          .light {
            width: 40%;
            height: 40%;
            
            &:before {
              content: "";
              display: block;
              width: 70%;
              height: 70%;
              background-color: $light-color;
              border-radius: 50%;
            }
          }
        }
        
        .eye-inner {
          background-color: $light-color;
          width: 80%;
          height: 80%;
          @include position-absolute($top: 10%, $left: 10%);
          border-radius: 50%;
          
          .pupil {
            background-color: $frog-dark-color;
            width: 60%;
            height: 60%;
            @include position-absolute($top: 20%, $left: 20%);
            border-radius: 50%;
            
            .light {
              background-color: $light-color;
              width: 50%;
              height: 50%;
              @include position-absolute($top: 10%, $left: 10%);
              border-radius: 50%;
            }
          }
        }
        
        &-left {
          @include position-absolute($top: 0px, $left: 0);
        }
        
        &-right {
          @include position-absolute($top: 0px, $right: 0);
        }
      }
    }
  }
}

/* icon-1 styles */

.frog#frog-1 {
  
  .body {
    
    .mouth {
      @keyframes smile {
        0% {
          border-radius: 0%;
        }
        
        20% {
          border-radius: 50%;
        }
        
        70% {
          border-radius: 50%;
        }
      }
      
      width: 18px;
      height: 22px;
      border-bottom: 3px solid $frog-dark-color;
      @include position-absolute($top: 6px, $right: 0, $left: 0);
      animation: smile 3.8s linear 0s infinite;
    }
  }
}

/* icon-2 styles */

.frog#frog-2 {
  
  .mouth {
    background-color: $light-color;
    @include position-absolute($top: 30px, $right: 0, $left: 0);
  }
  
  .eye-inner {
    $rotate-angle: 45deg;
    
    @keyframes hearts {
      0% {
        transform: scale(0.7);
      }
      
      100% {
        transform: scale(1);
      }
    }
    
    top: 17%;
    background-color: transparent !important;
    animation: hearts 0.6s linear 0s infinite alternate;
    
    &:before,
    &:after {
      content: "";
      display: block;
      height: 70%;
      width: 40%;
      background-color: $dark-pink-color;
      border-radius: 50% 50% 0 0 ;
    }
    
    &:before {
      @include position-absolute($top: 0, $left: 5px);
      transform: rotate(-$rotate-angle);
    }
    
    &:after {
      @include position-absolute($top: 0, $right: 5px);
      transform: rotate($rotate-angle);
    }
    
    .pupil {
      display: none;
    }
  }
}

/* icon-3 styles */

.frog#frog-3 {
  
  .eye-right {
    
    .light {
      @include position-absolute($top: 10%, $right: 10%, $left: auto);
    }
  }
  
  .mouth {
    width: 25px;
    height: 25px;
    @include position-absolute($top: 5px, $right: 0, $left: 0);
    transform: rotate(23deg);
    
    &:before {
      content: "";
      display: block;
      border-bottom: 3px solid $frog-dark-color;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: $frog-color;
      z-index: 3;
      @include position-absolute($top: 0px, $left: 0);
    }
  }
  
  .toungue {
    @keyframes toungue {
      0% {
        transform: scale(1,1);
      }
      
      40% {
        transform: scale(1,1);
      }
      
      75% {
        transform: scale(1,0);
      }
    }
    
    width: 16px;
    height: 20px;
    background-color: $dark-pink-color;
    border-radius: 30px;
    z-index: 2;
    @include position-absolute($top: 17px, $left: 4px);
    transform-origin: center top;
    animation: toungue 2.0s linear 0s infinite;
    
    &:before {
      content: "";
      display: block;
      width: 2px;
      height: 4px;
      background-color: darken($dark-pink-color, 30%);
      @include position-absolute($bottom: 5px, $left: 0px, $right: 0px);
      margin: auto;
      opacity: 0.4;
    }
  }
}

/* icon-4 styles */
.frog#frog-4 {
  
  .eye {
    
    .light {
      @include position-absolute($top: 9px, $left: 0px);
      
      &:before {
        @include position-absolute($top: -5px, $left: 0px);
      }
    }
  }
  
  .mouth {
    @keyframes laugh {
      
      0% {
        transform: scale(1,0);
      }
      
      30% {
        transform: scale(1,1);
      }
      
      40% {
        transform: scale(1,0.6);
      }
      
      50% {
        transform: scale(1,1);
      }
      
      60% {
        transform: scale(1,0.6);
      }
      
      70% {
        transform: scale(1,1);
      }
    }
    
    @include position-absolute($top: 20px, $right: 0, $left: 0);
    background-color: lighten($dark-pink-color, 25%);
    overflow: hidden;
    transform-origin: center top;
    animation: laugh 1.9s linear 0s infinite;
    
    .toungue {
      width: 17px;
      height: 17px;
      background-color: $dark-pink-color;
      border-radius: 20px;
      @include position-absolute($top: 9px, $left: 3);
      transform: rotate(20deg);
    }
  }
}

/* icon-5 styles */

.frog#frog-5 {
  
  @keyframes eyes-1 {
      
      0% {
        transform: scale(1,1);
        opacity: 1;
      }
      
      20% {
        transform: scale(0,0);
        opacity: 0;
      }
      
      70% {
        transform: scale(0,0);
        opacity: 0;
      }
      
      80% {
        transform: scale(1,1);
        opacity: 1;
      }
    }
    
    @keyframes eyes-2 {
       0% {
        opacity: 0;
        @include position-absolute($top: 40%, $left: 20%);
      }
      
      28% {
        opacity: 1;
        @include position-absolute($top: 20%, $left: 20%);
      }
      
      70% {
        opacity: 1;
        @include position-absolute($top: 20%, $left: 20%);
      }
      
      78% {
        opacity: 0;
        @include position-absolute($top: 40%, $left: 20%);
      }
    }
  
     @keyframes blush {
       0% {
        opacity: 0;
      }
      
      20% {
        opacity: 1;
      }
       
      70% {
        opacity: 1;
      }
       
      80% {
        opacity: 0;
      }
    }
  
  .eye {
    
    &:after {
      content: "";
      display: block;
      width: 60%;
      height: 60%;
      border-top: 3px solid $frog-dark-color;
      border-radius: 50%;
      @include position-absolute($top: 40%, $left: 20%);
      opacity: 0;
      animation: eyes-2 2.8s linear 0s infinite;
    }
    
    .eye-inner {
      transform-origin: center center;
      animation: eyes-1 2.8s linear 0s infinite;
    }
  }
  
  .blush {
    opacity: 0;
    animation: blush 2.8s linear 0s infinite;
  }
  
  .mouth {
    width: 26px;
    height: 26px;
    border-bottom: 10px solid $light-color;
    border-radius: 20px;
  }
}

/* icon-6 styles */

.frog#frog-6 {
  
  @keyframes eyes-big-light {
    
    0% {
      @include position-absolute($top: 10%, $left: 10%, $right: auto, $bottom: auto);
    }
    
    20% {
      @include position-absolute($top: auto, $left: auto, $right: 10%, $bottom: 10%);
    }
    
    70% {
      @include position-absolute($top: auto, $left: auto, $right: 10%, $bottom: 10%);
    }
    
    80% {
      @include position-absolute($top: 10%, $left: 10%, $right: auto, $bottom: auto);
    }
  }
  
    @keyframes eyes-small-light {
    
      0% {
         opacity: 0;
      }

      23% {
        opacity: 1;
      }

      70% {
        opacity: 1;
      }

      75% {
        opacity: 0;
      }
  }
  
  @keyframes blush {
       0% {
        opacity: 0;
      }
      
      20% {
        opacity: 1;
      }
       
      70% {
        opacity: 1;
      }
       
      80% {
        opacity: 0;
      }
    }
  
  .eye {
    
    .light {
      animation: eyes-big-light 2.8s linear 0s infinite;
      
      &:before {
        @include position-absolute($top: -5px, $left: 5px);
        opacity: 0;
        animation: eyes-small-light 2.8s linear 0s infinite;
      }
    }
  }
  
  .blush {
    opacity: 0;
    animation: blush 2.8s linear 0s infinite;
  }
  
  .mouth {
    width: 16px;
    height: 16px;
    border-bottom: 10px solid $light-color;
    border-radius: 20px;
  }
}

/* icon-7 styles */

.frog#frog-7 {
  
  .eye {
    
    @keyframes eye-animation {
      
      0% {
        @include position-absolute($top: 5px, $left: auto, $right: 3px);
      }
      
      25% {
        @include position-absolute($top: 0px, $left: 0, $right: 0);
        margin: auto;
      }
      
      50% {
        @include position-absolute($top: 5px, $left: 3px, $right: auto);
      }
      
      75% {
        @include position-absolute($top: 0px, $left: 0, $right: 0);
        margin: auto;
      }
    }
    
    .pupil {
      width: 40%;
      height: 40%;
      @include position-absolute($top: 5px, $left: auto, $right: 3px);
      animation: eye-animation 3.6s linear 0s infinite;
      
      .light {
        width: 5px;
        height: 5px;
        @include position-absolute($top: 2px, $left: auto, $right: 0px);
      }
    }
  }
  
  .mouth {
    width: 16px;
    height: 3px;
    background-color: $frog-dark-color;
    @include position-absolute($top: 20px, $left: 0px, $right: 0px);
    border-radius: 5px;
  }
}

/* icon-8 styles */

.frog#frog-8 {
  
  .eye {
    
    &:after {
      content: "";
      display: block;
      width: 60%;
      height: 60%;
      border-bottom: 3px solid $frog-dark-color;
      border-radius: 50%;
      @include position-absolute($top: 0, $left: 20%);
    }
    
    &-left {
      
      &:after {
        transform: rotate(-12deg);
      }
    }
    
    &-right {
      
      &:after {
        transform: rotate(12deg);
      }
    }
    
    &-inner {
      display: none;
    }
  }
  
  @keyframes mouth {
    
    0% {
      transform: scale(0.7);
    }
    
    60% {
      transform: scale(1);
    }
  }
  
  .mouth {
    height: 21px;
    width: 14px;
    background-color: $light-color;
    border-radius: 50%;
    box-shadow: 2px 2px 0px 0px rgba($frog-dark-color,0.3);
    @include position-absolute($top: 16px, $left: 0px, $right: 0px);
    transform: scale(0.7);
    transform-origin: center top;
    animation: mouth 2s linear 0s infinite;
  }
  
  .sleepy-icons {
    @keyframes sleepy-icons {
      
      0% {
        opacity: 0;
      }
      
      100% {
        opacity: 1;
      }
    }
    
    width: 34px;
    height: 50px; 
    @include position-absolute($top: 0px, $left: 0px);
    z-index: 10;
    color: $frog-dark-color;
    font: {
      weight: bold;
    }
    
    div {
      text-shadow: 2px 2px 0px rgba($frog-dark-color,0.3);
      transform: rotate(-15deg);
      opacity: 0;
      
      &:nth-child(1) {
        @include position-absolute($top: 5px, $left: 10px);
        font-size: 16px;
        animation: sleepy-icons 1s linear 0s infinite alternate;
      }
      
      &:nth-child(2) {
        @include position-absolute($top: -6px, $left: -6px);
        font-size: 12px;
        animation: sleepy-icons 1s linear 0.5s infinite alternate;
      }
      
      &:nth-child(3) {
        @include position-absolute($top: -30px, $left: -10px);
        font-size: 19px;
        animation: sleepy-icons 1s linear 1s infinite alternate;
      }
    }
  }
}

/* icon-9 styles */

.frog#frog-9 {
  
  @keyframes color-animation {
    0% {
      background-color: $frog-color;
    }
    
    30% {
      background-color: $frog-dark-color;
    }
    
    70% {
      background-color: $frog-dark-color;
    }
    
    80% {
      background-color: $frog-color;
    }
  }
  
  @keyframes color-animation-2 {
    0% {
      border-color: $frog-dark-color;
    }
    
    30% {
      border-color: darken($frog-dark-color,20%);
    }
    
    70% {
      border-color: darken($frog-dark-color,20%);
    }
    
    80% {
      border-color: $frog-dark-color;
    }
  }
  
  @keyframes color-animation-3 {
    0% {
      background-color: $frog-dark-color;
    }
    
    30% {
      background-color: darken($frog-dark-color,10%);
    }
    
    70% {
      background-color: darken($frog-dark-color,10%);
    }
    
    80% {
      background-color: $frog-dark-color;
    }
  }
  
  .body,
  .eye:before {
    animation: color-animation 2.5s linear 0s infinite;
  }
  
  .eye:after {
    animation: color-animation 2.5s linear 0s infinite, color-animation-2 2.5s linear 0s infinite;
  }
  
  .mouth {
    animation: color-animation-2 2.5s linear 0s infinite;
  }
  
  .mouth:before,
  .mouth:after {
    animation: color-animation-3 2.5s linear 0s infinite;
  }
  
  .blush {
    
    &:before,
    &:after {
      background-color: $frog-color;
    }
  }
  
  .eye {
    
    .eye-inner {
      width: 60%;
      height: 60%;
    }
    
    &:after {
      content: "";
      display: block;
      background-color: $frog-color;
      width: 20px;
      height: 10px;
      border-radius: 30px;
      border-bottom: 2px solid $frog-dark-color;
    }
    
    &-left {
      
      .eye-inner {
        @include position-absolute($top: 20%, $left: 30%);
      }
      
      &:after {
        @include position-absolute($top: 18%, $left: 28%);
        transform: rotate(-15deg);
      }
    }
    
    &-right {
      
      .eye-inner {
        @include position-absolute($top: 20%, $left: 15%);
      }
      
      &:after {
        @include position-absolute($top: 18%, $left: 20%);
        transform: rotate(15deg);
      }
    }
  }
  
  .mouth {
    width: 20px;
    height: 10px;
    border-top: 3px solid $frog-dark-color;
    border-radius: 50%;
    @include position-absolute($top: 20px, $left: 0, $right: 0);
    
    &:before,
    &:after {
      content: "";
      display: block;
      width: 2px;
      height: 6px;
      background-color: $frog-dark-color;
    }
    
    &:before {
      @include position-absolute($top: -3px, $left: 0);
      transform: rotate(-8deg);
    }
    
    &:after {
      @include position-absolute($top: -3px, $right: 0);
      transform: rotate(8deg);
    }
  }
}

/* icon-10 styles */

.frog#frog-10 {
  
  .eye {
    
    .eye-inner {
      background: transparent;
      
      &:before,
      &:after {
        content: "";
        display: block;
        width: 3px;
        height: 15px;
        background-color: darken($frog-dark-color,50%);
        @include position-absolute($top: 5px, $left: 0, $right: 0);
        margin: auto;
      }
      
      &:before {
        transform: rotate(-45deg);
      }
      
      &:after {
        transform: rotate(45deg);
      }
      
      .pupil {
        display: none;
      }
    }
  }
  
  .mouth {
    @keyframes mouth-2 {
    
    0% {
      transform: scale(0);
      opacity: 0;
    }
    
    60% {
      transform: scale(1);
      opacity: 1;
    } 
  }
    
    height: 21px;
    width: 20px;
    background-color: $frog-dark-color;
    border-radius: 50%;
    @include position-absolute($top: 16px, $left: 0px, $right: 0px);
    transform-origin: center center;
    animation: mouth-2 2s linear 0s infinite alternate;
  }
}

/* icon-11 styles */

.frog#frog-11 {
  
  .eye {
    
    &:after {
      content: "";
      display: block;
      width: 50%;
      height: 50%;
      border-bottom: 3px solid $frog-dark-color;
      border-radius: 50%;
      @include position-absolute($top: 0px, $left: 0px, $right: 0px);
      margin: auto;
    }
    
    .eye-inner {
      display: none;
    }
  }
  
  .mouth {
    width: 20px;
    height: 20px;
    border-top: 2px solid $frog-dark-color;
    border-radius: 50%;
    @include position-absolute($top: 16px, $left: 0px, $right: 0px);
  }
  
  .tear {
    @keyframes tear {
      0% {
        top: 6px;
        transform: scale(0.4) rotate(45deg);
      }
      
      100% {
        top: 85%;
        transform: scale(1) rotate(45deg);
      }
    }
    
    width: 20px;
    height: 20px;
    background-color: lighten($tear-bg,10%);
    border-radius: 0px 50% 50% 50%;
    @include position-absolute($top: 6px, $left: 16px);
    z-index: 10;
    animation: tear 1.8s linear 0s infinite;
    
    &:before {
      content: "";
      display: block;
      width: 90%;
      height: 90%;
      background-color: darken($tear-bg,20%);
      border-radius: 0px 50% 50% 50%;
      @include position-absolute($top: 0px, $left: 0px);
    }
  }
}

/* icon-12 styles */

.frog#frog-12 {
  @keyframes angry-frog-bg {
    
    0% {
      background-color: $frog-color;
    }
    
    30% {
      background-color: lighten($dark-pink-color, 25%);;
    }
    
    70% {
      background-color: lighten($dark-pink-color, 25%);;
    }
    
    80% {
      background-color: $frog-color;
    }
  }
  
  @keyframes angry-eyes {
    0% {
      transform: scale(1);
    }
    
    30% {
      transform: scale(0.6);
    }
    
    70% {
      transform: scale(0.6);
    }
    
    80% {
      transform: scale(1);
    }
  }
  
  @keyframes angry-brows-mouth {
    0% {
      opacity: 0;
    }
    
    37% {
      opacity: 1;
    }
    
    70% {
      opacity: 1;
    }
    
    77% {
      opacity: 0;
    }
  }
  
  .body,
  .eye:before{
    animation: angry-frog-bg 2.8s linear 0s infinite;
  }
  
  .eye-inner {
    animation: angry-eyes 2.8s linear 0s infinite;
  }
  
  .eye {
    
    &:after {
      content: "";
      display: block;
      width: 13px;
      height: 3px;
      background-color: $dark-pink-color;
      @include position-absolute($top: 5px, $left: 0, $right: 0);
      margin: auto;
      animation: angry-brows-mouth 2.8s linear 0s infinite;
      opacity: 0;
    }
    
    &-left {
      
      &:after {
        transform: rotate(10deg);
      }
    }
    
    &-right {
      
      &:after {
        transform: rotate(-10deg);
      }
    }
  }
  
  .mouth {
    width: 18px;
    height: 8px;
    border-top: 3px solid $dark-pink-color;
    @include position-absolute($top: 16px, $left: 0, $right: 0);
    border-radius: 50%;
    transform: rotate(32deg);
    opacity: 0;
    animation: angry-brows-mouth 2.8s linear 0s infinite;
  }
}

6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu

<div class="container">
  <h1>Animasi CSS3 <span> Emoji</span> Kodok</h1>
  <div class="emoji-container">
    
    <!--icon #1-->
    <div class="icon">
      <div class="frog" id="frog-1">
        
        <div class="body">
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #2-->
    <div class="icon">
      <div class="frog" id="frog-2">
        
        <div class="body">
          <div class="blush"></div>
          <div class="mouth big-mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #3-->
    <div class="icon">
      <div class="frog" id="frog-3">
        
        <div class="body">
          <div class="mouth">
            <div class="toungue"></div>
          </div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left wink">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #4-->
    <div class="icon">
      <div class="frog" id="frog-4">
        
        <div class="body">
          <div class="mouth big-mouth">
            <div class="toungue"></div>
          </div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #5-->
    <div class="icon">
      <div class="frog" id="frog-5">
        
        <div class="body">
          <div class="blush"></div>
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #6-->
    <div class="icon">
      <div class="frog" id="frog-6">
        
        <div class="body">
          <div class="blush"></div>
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right extra-light">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #7-->
    <div class="icon">
      <div class="frog" id="frog-7">
        
        <div class="body">
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
    <!--icon #8-->
    <div class="icon">
      <div class="frog" id="frog-8">
        
        <div class="body">
          <div class="mouth"></div>
          <div class="sleepy-icons">
            <div>Z</div>
            <div>Z</div>
            <div>Z</div>
          </div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
   <!--icon #9-->
    <div class="icon">
      <div class="frog" id="frog-9">
        
        <div class="body">
          <div class="blush"></div>
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
   <!--icon #10-->
    <div class="icon">
      <div class="frog" id="frog-10">
        
        <div class="body">
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> 
    
    <!--icon #11-->
    <div class="icon">
      <div class="frog" id="frog-11">
        
        <div class="body">
          <div class="tear"></div>
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!--icon #12-->
    <div class="icon">
      <div class="frog" id="frog-12">
        
        <div class="body">
          <div class="mouth"></div>
        </div>
        
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> 
    
  </div>
</div>

10. Save lagi dan Publikasikan.
11. Lihat blog kalian dan sudah muncul itu Emoji Kodoknya.

EMOJI KODOK

KEHIDUPAN Masih berlanjut tentang kodok. Kodok dan katak mengawali hidupnya sebagai telur yang diletakkan induknya di air, di sarang busa, atau di tempat-tempat basah lainnya. Beberapa jenis kodok pegunungan menyimpan telurnya di antara lumut-lumut yang basah di pepohonan.

MAKANAN Kodok dan katak hidup menyebar luas, terutama di daerah tropis yang berhawa panas. Makin dingin tempatnya, seperti di atas gunung atau di daerah bermusim empat (temperate), jumlah jenis kodok cenderung semakin sedikit. Salah satunya ialah karena kodok termasuk hewan berdarah dingin, yang membutuhkan panas dari lingkungannya untuk mempertahankan hidupnya dan menjaga metabolisme tubuhnya.

KEMBANG BIAK Pada saat bereproduksi katak dewasa akan mencari lingkungan yang berair. Disana mereka meletakkan telurnya untuk dibuahi secara eksternal. Telur itu berkembang menjadi larva dan mencari nutrisi yang dibutuhkan dari lingkungannya, kemudian berkembang menjadi dewasa dengan bentuk tubuh yang memungkinkannya hidup di darat, sebuah proses yang dikenal dengan metamorfosis.

KODOK vs MANUSIA Sudah sejak lama kodok dikenal manusia sebagai salah satu makanan lezat. Di rumah-rumah makan Tionghoa, masakan kodok terkenal dengan nama Swie Kee. Disebut 'ayam air' (swie: air, kee: ayam) demikian karena paha kodok yang gurih dan berdaging putih mengingatkan pada paha ayam. Selain itu, di beberapa tempat di Jawa Timur, telur-telur kodok tertentu juga dimasak dan dihidangkan dalam rupa pepes telur kodok.

Oke sudah pada penghujung acara. Selamat malam dan istirahat. Salam -- E M O J I -- :D

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Aneka Ragam Ekspresi Katak dalam Icon Emoji dengan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts