Cara Membuat Animasi Smiley Menggunakan CSS

Cara Membuat Animasi Smiley Menggunakan CSS - Assalamu'alaikum warahmatullahi wabarakatuh, Hallo sahabat Gurusdku.Id Salam PPK, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Animasi Smiley Menggunakan CSS, mudah-mudahan isi postingan Artikel Blog Tutorial, Artikel Trick CSS, bisa bermanfaat bagi proses pembelajaran di sekolah bapak dan ibu gurusdku.

Judul : Cara Membuat Animasi Smiley Menggunakan CSS
link : Cara Membuat Animasi Smiley Menggunakan CSS

Info [K-moe] - Awalnya saya mencoba bereksplorasi dengan CSS. Pertama mencoba membuat lingkaran ternyata berhasil. Kemudian saya coba berpikir untuk membuat animasi smiley menggunakan CSS. Setelah beberapa kali gagal akhirnya berhasil juga. Bagi yang ingin mencobanya.. silahkan ikuti langkah-langkahnya.

Tips Trick CSS membuat Animasi smiley.

1. Pertama untuk membuat nya sobat buat terlebih dahulu struktur HTML seperti dibawah ini.

  <div class="smiley">
  <span class="mata matakiri"></span>
    <span class="mata matakanan"></span>
    <div class="mulut">
      <div class="lesungpipi">
      </div>
      <div class="lesungpipi kanan">
      </div>
      </div>
  </div>

2. Langkah selanjutnya membuat lingkaran dengan menambahkan CSS berikut:

div.smiley {
       margin:50px;
       width: 100px;
       height: 100px;
       position: relative;
       border-radius: 150px;
       -webkit-border-radius: 150px;
       -moz-border-radius: 50px;
       display: block;
       background: #ffe632;
       background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
       background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);
       box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
       -webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
       -moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
       }

3. Kemudian membuat 2 bola mata dengan kode css seperti ini

span.mata {
 width: 15px;
 height: 25px;
 background: #222;
 border-radius: 100px/160px;
 -webkit-border-radius: 100px 160px;
 -moz-border-radius: 100px/160px;
 position: absolute;
 top: 20px;
 box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 } 
 
span.mata.matakiri {
        left: 60px;
}
  
span.mata.matakanan {
        right: 60px;
}

5. Langkah kelima membuat mulut yang dapat dilakukan dengan menulis kode css seperti di bawah ini

div.mulut{
 width: 50px;
 height: 20px;
 border: 3px solid #222;
 border-top: 0;
 background: rgba(0,0,0,0);
 -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
 -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
 border-radius: 0 0 120px 120px / 0 0 90px 90px;
 position: absolute;
 bottom: 15px;
 left: 22px;
 box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
 }

6. Langkah ke enam membuat lesung pipi

div.lesungpipi {
 width: 3px;
 height: 8px;
 background: #222;
 border-radius: 100px/160px;
 -webkit-border-radius: 100px 160px;
 -moz-border-radius: 100px/160px;
 position: absolute;
 top: -3px;
 -webkit-transform: rotate(65deg);
 -moz-transform: rotate(65deg);
 left: -4px;
 }
 
div.lesungpipi.kanan {
 left: 50px;
 -webkit-transform: rotate(-65deg);
 -moz-transform: rotate(-65deg);  
 }

7. Langkah terakhir menambahkan animasi berputar dan meloncat dengan menambahkan CSS di bawah ini:

div.smiley:hover{
       -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
       -webkit-animation: a0 .2s infinite alternate .5s;
       -moz-animation: a0 .2s infinite alternate .5s;
       -ms-animation: a0 .2s infinite alternate .5s;
       -o-animation: a0 .2s infinite alternate .5s;
       animation: a0 .2s infinite alternate .5s;
       -webkit-transition: all 2s ease-in-out;
       -moz-transition: all 2s ease-in-out;
       -ms-transition: all 2s ease-in-out;
       -o-transition: all 2s ease-in-out;
       transition: all 2s ease-in-out;}

div.smiley{
       -webkit-animation: bounce .3s ease infinite alternate;}
@-webkit-keyframes bounce {
  100% {
    top: -30px;
    box-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 30px 30px rgba(0, 0, 0, .3);
  }
}

Demikianlah Artikel Cara Membuat Animasi Smiley Menggunakan CSS

Sekianlah artikel Cara Membuat Animasi Smiley Menggunakan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Animasi Smiley Menggunakan CSS dengan alamat link https://silabusgtk.blogspot.com/2017/04/cara-membuat-animasi-smiley-menggunakan.html

Share this post