CSS JS

RAINBOW TEXT WITH CSS & JS

(quick guide & examples)

COLOR SEQUENCE @keyframes rainbow {   0% { color: red }   50% { color: green }   100% { color: blue } }

CSS RAINBOW TEXT

01

ATTACH ANIMATION .rainbow {   animation-name: rainbow;   animation-duration: 3s;   animation-iteration-count: infinite; }

HTML <p class="rainbow">FOO!</p>

TARGET TEXT BLOCK let txt = document.getElementById("txt");

JS RAINBOW TEXT

02

LOOP & CHANGE TEXT COLOR let now = -1; setInterval(() => {   now++;   if (now >= colors.length) { now = 0; }   txt.style.color = "#" + colors[now]; }, 1000);

RAINBOW COLORS let colors = ["fc0303", "45f52a", "2a7bf5"];