CSS3 Pelangi

CSS

a.rainbow {
color:white;
text-decoration:none;
-webkit-animation:rainbow 2s linear infinite alternate;
-moz-animation:rainbow 2s linear infinite alternate;
-ms-animation:rainbow 2s linear infinite alternate;
-o-animation:rainbow 2s linear infinite alternate;
animation:rainbow 2s linear infinite alternate;
}


@-webkit-keyframes rainbow {
0% {color:red; }
10% {color:orange; }
20% {color:gold; }
30% {color:yellow; }
40% {color:yellowgreen;}
50% {color:green; }
60% {color:cyan; }
70% {color:blue; }
80% {color:violet; }
90% {color:magenta; }
100% {color:indigo; }
}
@-moz-keyframes rainbow {
0% {color:red; }
10% {color:orange; }
20% {color:gold; }
30% {color:yellow; }
40% {color:yellowgreen;}
50% {color:green; }
60% {color:cyan; }
70% {color:blue; }
80% {color:violet; }
90% {color:magenta; }
100% {color:indigo; }
}
@-ms-keyframes rainbow {
0% {color:red; }
10% {color:orange; }
20% {color:gold; }
30% {color:yellow; }
40% {color:yellowgreen;}
50% {color:green; }
60% {color:cyan; }
70% {color:blue; }
80% {color:violet; }
90% {color:magenta; }
100% {color:indigo; }
}
@-o-keyframes rainbow {
0% {color:red; }
10% {color:orange; }
20% {color:gold; }
30% {color:yellow; }
40% {color:yellowgreen;}
50% {color:green; }
60% {color:cyan; }
70% {color:blue; }
80% {color:violet; }
90% {color:magenta; }
100% {color:indigo; }
}
@keyframes rainbow {
0% {color:red; }
10% {color:orange; }
20% {color:gold; }
30% {color:yellow; }
40% {color:yellowgreen;}
50% {color:green; }
60% {color:cyan; }
70% {color:blue; }
80% {color:violet; }
90% {color:magenta; }
100% {color:indigo; }
}

HTML

<a class="rainbow" href="#">CSS3 Pelangi</a>
<hr class="rainbow" color="white" size="5px" width="100%" />

a.rainbow { color:white; text-decoration:none; -webkit-animation:rainbow 2s linear infinite alternate; -moz-animation:rainbow 2s linear infinite alternate; -ms-animation:rainbow 2s linear infinite alternate; -o-animation:rainbow 2s linear infinite alternate; animation:rainbow 2s linear infinite alternate; } @-webkit-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-moz-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-ms-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-o-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } hr.rainbow { color:white; text-decoration:none; -webkit-animation:rainbow 2s linear infinite alternate; -moz-animation:rainbow 2s linear infinite alternate; -ms-animation:rainbow 2s linear infinite alternate; -o-animation:rainbow 2s linear infinite alternate; animation:rainbow 2s linear infinite alternate; } @-webkit-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-moz-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-ms-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @-o-keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } @keyframes rainbow { 0% {color:red; } 10% {color:orange; } 20% {color:gold; } 30% {color:yellow; } 40% {color:yellowgreen;} 50% {color:green; } 60% {color:cyan; } 70% {color:blue; } 80% {color:violet; } 90% {color:magenta; } 100% {color:indigo; } } CSS3 Pelangi


Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s