Posted on

Kode CSS Membuat Animasi Mengetik WordPress

Kode CSS Membuat Animasi Mengetik WordPress

wpJakarta.Com – Kode CSS Membuat Animasi Mengetik WordPress. Referensi artikel tentang kode CSS membuat animasi mengetik WordPress, lihat halaman 2 Cara Membuat Animasi Mengetik WordPress.

Kode HTML

Tempatkan kode berikut di lokasi halaman dimana animasi mengetik akan di tampilkan.

<div class="mengetik-css">
  <h1>wpJakarta - a Non Open BO Company!</h1>
</div>

Kode CSS membuat animasi mengetik di website WordPress

Tambahkan kode CSS berikut melalui customizer >> additional css. Menggunakan properties @keyframes yang dapat membuat animasi dengan menggerakan dari satu gaya ke gaya yang lain secara gradual. Tentang @keyframes properties CSS lihat di https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp.

.mengetik-css.h1 {
  overflow:hidden;
  white-space:nowrap;
  animation: 
    typing 3.5s steps(30, end),
 blink-caret .5s step-end infinite;
}

@keyframes typing {
  from { 
    width:0 
  }
  to { 
    width:100% 
  }
}

@keyframes blink-caret {
  from, to { 
    border-color:transparent }
  50% { 
    border-color:#ff4500 }
}

Kembali ke artikel : 2 Cara Membuat Animasi Mengetik WordPress.

Bagaimana menambahkan kode css di website WordPress

Untuk menambahkan tambahan kode CSS ke dalam website WordPress dapat di lakukan dengan menggunakan snippet yang ada di halaman customizer (Customizer >> additional CSS). Atau anda bisa membuat file style.css melalui folder child theme.

Kode snippet kustomisasi lainnya