Warna Pelangi Pada Paragraf Postingan Blog

K

ode <p></p>biasanya digunakan untuk membuat paragraf baru pada sebuah postingan blog yang fungsinya sama dengan ENTER pada kunci keyboard komputer ,Nah untuk share postingan kali ini kang mahfid akan membuat sebuah tutorial CSS3 Key Frame yang bisa menimbulkan animasi tertentu pada setiap paragraf postingan ketika di dekati Cursor /mouse .

Sebagai contohnya silahkan sorot postingan saya ini ,coba effec apa yang terjadi ,ketika kursor ada di postingan ini maka akan menimbulkan berbagai warna animasi ,itulah effect warna Pelangi yang sengaja saya pasang pada setiap paragraf postingan blog.

Cara membuat nya sangat simpel dari very very gampang sekali ,silahkan sobat pasang kode css3 di bawah ini tepat di bawah kode ]]></b:skin> berikut kodenya :

<style>
@-moz-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -moz-animation-name: glow;
    -moz-animation-duration: 4s;
}
    @-webkit-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 4s;
}
     @-ms-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -ms-animation-name: glow;
    -ms-animation-duration: 4s;
} @-o-keyframes glow {
    0% { background-color: green; }
    25% { background-color: pink; }
    50% { background-color: yellow; }
     75% { background-color: orange; }
    100% { background-color: red; }
}
p:hover {
    -o-animation-name: glow;
    -o-animation-duration: 4s;
}

</style>

Silahkan sobat ganti kode warna di atas sesuai selera sobat sendiri ,dan untuk pemasangan di postingan  silahkan pasang kode paragraf  <p>Isi postingan  </p> selamat mencoba dan berexperiment (wassalam)

Perlu diperhatikan:akan lebih baik jika pemasangn kode <p> dan </p> di pasang setelah sobat akan publikasikan postingan .dan dalam bentuk HTML bukan Compose