» » » Efek Warna Warni pada Element dengan CSS

Efek Warna Warni pada Element dengan CSS

23.08
0 komentar
Element Berganti Warna Dengan CSS
Pada postingan sebelumnya saya membahas tentang Widget AL-Qur'an mp3 [Listen to Qur'an. Untuk kesempatan kali ini saya akan share cara membuat Element berganti warna dengan sendirinya dengan bantuan CSS @-keyframes. Misalnya merah, kuning, hijau, biru berganti warna dengan efek ngedip-ngedip. :D Tutorial ini saya dapat dari http://maz-waone.blogspot.com/ dan juga dari DTE.
Disini saya memberikan dasarnya saja, 
Lihat contoh-contoh berikut ini

1. Contoh pada tulisan 

<style> 
/* Elemen yang akan diberi Efek */
#warna-tulisan { 
color:#333 
}

/* CSS yang digunkan */ 
@-webkit-keyframes gantiwarna {0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}
@-moz-keyframes gantiwarna {
0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}
@-keyframes gantiwarna {
0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}

/* Penerapan efek pada element yang akan diberi efek*/ 
#warna-tulisan { 
animation: 5s infinite gantiwarna linear; /* Waktu 10 detik */
-webkit-animation: 5s infinite gantiwarna linear 
}
</style>
Hasilnya sebagai berikut ini

Admin ganteng ni brooo... Admin ganteng ni brooo... Admin ganteng ni brooo... Admin ganteng ni brooo... Admin ganteng ni brooo... 

 

2. Contoh lainya pada background


 <style>
#box {
  background-color:#333;
  width:100px;
  height:100px;
  margin:0 auto;
  border:5px solid #FFF;
}
@-webkit-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background-color:black}
}
@-moz-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background:black}
}
@-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background-color:black}
}
#box {
  animation:10s infinite gantiwarna2 linear;
  -webkit-animation:10s infinite gantiwarna2 linear;
} 
</style> 
Hasilnya sebagai berikut ini 


Agar tidak bingung, perhatikan penerapanya, jika kita ingin memberikan efek hanya pada tulisan maka kode css pada @-keyframes seperti ini:

@-keyframes gantiwarna {
0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}
dan pada background kodenya seperti ini  
@-keyframes gantiwarna {   0% {background-color:black}   20% {background-color:red}   40% {background-color:blue}   60% {background-color:green}   80% {background-color:gold}   100% {background-color:black} } 
Untuk penerapan pada blog kalian saya rasa sudah cukup jelas dengan contoh yang nomor satu.
Demikian postingan ini, semoga bermanfaat untuk anda.
Share:

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top