Is there any clean CSS method to make each letter in a word a different color?

colors, css

Solution

Here is some JavaScript.

var message = "The quick brown fox.";
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue

for (var i = 0; i < message.length; i++){
  document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
}

Problem

I need a way to allow each letter of a word to rotate through 3 different colors. I know of some not so clean ways I can do this with asp.NET, but I'm wondering if there might be a cleaner CSS/JavaScript solution that is more search engine friendly. The designer is including a file like this for each page. I'd rather not have to manually generate an image for every page as that makes it hard for the non-technical site editors to add pages and change page names.

Original source