Tutorial Membuat CSS Blink - Code Pelajar

Code Pelajar - Halo Sob setelah tadi saya memposting sebuah tutorial Series " Memaksimalkan Penggunaan Inspect Element (Developer Tools), kali ini saya akan membuat tutorial singkat yang sekalian menjadi arsip bagi saya sendiri. yaitu Tutorial Membuat CSS Blink dengan Cara Penerapannya.


Tutorial Membuat CSS Blink

  1. Salin & terapkan CSS berikut kedalam StyleSheet CSS kalian.
  2. .cp-blink {
     -webkit-animation: cp-blink 1s ease infinite!important;
     -moz-animation: cp-blink 1s ease infinite!important;
     animation: cp-blink 1s ease infinite!important;
     -webkit-animation: cp-blink 1.1s steps(5, start) infinite;
    }
    
    @-webkit-keyframes cp-blink {
     0% {
      opacity: 0;
     }
     50% {
      opacity: 1;
     }
     100% {
      opacity: 0;
     }
    }
    
    @-moz-keyframes cp-blink {
     0% {
      opacity: 0;
     }
     50% {
      opacity: 1;
     }
     100% {
      opacity: 0;
     }
    }
    
    @keyframes cp-blink {
     0% {
      opacity: 0;
     }
     50% {
      opacity: 1;
     }
     100% {
      opacity: 0;
     }
    }
  3. Jika sudah Simpan, Sekarang saatnya kalian menambahkan Class cp-blink pada element yang akan dibuat Blink(kedap-kedip).
  4. Jika ingin mengatur kecepetan BLINK nya kalian bisa mencari CSS animation
  5. Jika sudah Simpan dan lihat hasilnya.

Tutorial ini sangatlah singkat hehe, semoga bermanfaat sob

DEMO CSS BLINK



Table Of Content

    Contact Form

    Kirim