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>
Eksperimen Sejenis Lainnya
Cek halaman ini juga: CSS3 Rainbow Dividers
Sumber https://www.dte.web.id/