Categories: CSS

Animasi flashing data dan scroll dengan CSS

Bismillaahirrohmaanirrohiim…

Untuk menampilkan animasi flashing atau blink blink, baik itu pada div atau baris pada tabel bisa menggunakan kode CSS berikut:

@-webkit-keyframes invalid {
  from { background-color: #f39c1285; }
  to { background-color: inherit; }
}
@-moz-keyframes invalid {
  from { background-color: #f39c1285; }
  to { background-color: inherit; }
}
@-o-keyframes invalid {
  from { background-color: #f39c1285; }
  to { background-color: inherit; }
}
@keyframes invalid {
  from { background-color: #f39c1285; }
  to { background-color: inherit; }
}
.flashing, .flashingalt {
     font-weight: bold;
  -webkit-animation: invalid 2s linear infinite; /* Safari 4+ */  -moz-animation:    invalid 2s linear infinite; /* Fx 5+ */  -o-animation:      invalid 2s linear infinite; /* Opera 12+ */  animation:         invalid 2s linear infinite; /* IE 10+ */}

Sedangkan untuk membuat style pada scroll, baik itu div atau scroll halaman utama, gunakan kode berikut:

.areakelas::-webkit-scrollbar {
  width: 5px;
}
/* Track */.areakelas::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px #dd4b39;
  border-radius: 5px;
}

/* Handle */.areakelas::-webkit-scrollbar-thumb {
    background: #c23321;
    border-radius: 5px;
}

Nah, begitu semoga bermanfaat…

Bagikan
rasupe

Recent Posts

CPU usage tinggi pada server

Bismillaahirrohmaanirrohiim... Untuk mendeteksi cpu usage tinggi memang perkara rumit, adakalanya karena codingan bermasalah, akses ke…

2 months ago

Membersihkan log mongodb yang besar

Bismillaahirrohmaanirrohiim... Jika tidak dirawat dan dicek berkala, log mongodb akan semakin membesar. Bahkan sampai menghabiskan…

2 months ago

Cara mengakses gps di HP dengan javascript

Bismillaahirrohmaanirrohiim... Jika kita membuat website yang digunakan untuk memantau lokasi HP client, maka kita memerlukan…

5 months ago

Menghitung jarak dua titik koordinat dengan php dan javascript

Bismillaahirrohmaanirrohiim... Kali ini kita akan mencoba menerapkan rumus trigonometeri dari formula haversine, yang digunakan untuk…

5 months ago

Kemasan cleo botol kecil sering bikin tangan terluka

Bismillaahirrohmaanirrohiim... Disini saya akan berbagi pengalaman tentang susahnya membuka tutup botol cleo kecil ukuran 220ml.…

5 months ago

Solusi InsCek pada meteran PLN

Bismillaahirrohmaanirrohiim... Kali ini saya akan berbagi pengalaman tentang mati lampu yang disebabkan oleh permasalahan arus…

5 months ago