<style>
#test{animation:change 10s linear 0s infinite;font-size:30px;font-weight:700;}
@keyframes change{0%   {color:#333;}25%{color:#ff0;}50%{color:#f60;}75%{color:#cf0;}100% {color:#f00;}}
</style>
<div id="test" >这里是内容</div>

<pre id="aa"></pre>

<div style="display:none" id="w">实现类似

</div>

<script language="javascript">
var index=0;

var word=document.getElementById("w").innerHTML;


function type(){

if(index>3)index=0;
document.getElementById("aa").innerText = word.substring(0,index++);

}
setInterval(type, 500);

</script>