类似歌词文字逐个变色效果

此代码仅供参考

---

代码说明

一行文字显示之后再一个个地变色显示。 颜色可以自定。

使用方法：修改"我的磨欢迎你…"为你要显示的文字即可，文字颜色和颜色变化速度的修改位置已在代码中有所注释。

---

html代码

<style> .mymo{ position:relative; width:100%; } .comm{ font-size:24px; color:white; /*变色前的颜色*/ position: absolute; top:0; left:0; } .red{ color: purple; /*变色后的颜色*/ width: 0; overflow: hidden; white-space: nowrap; z-index: 10; }; </style> <div class="mymo"> <strong id="mo" class="comm">我的磨欢迎你! 加入我们吧</strong> </div> <script> function getStyle( elem, name ) { if (elem.style[name]) return elem.style[name]; else if (elem.currentStyle) return elem.currentStyle[name]; else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem,""); return s && s.getPropertyValue(name);} else return null; } (function(){ var lb = document.getElementById("mo"), lt = lb.cloneNode(true), i = 0, sw = parseInt(getStyle(lb,'width')); lt.setAttribute('id',lb.getAttribute('id')+'1'); lt.className = 'comm red'; lb.parentNode.appendChild(lt); window.sliderFont = setInterval(function(){ parseInt(getStyle(lt,'width')) >= sw ? clearInterval(window.sliderFont) : lt.style['width'] = i++ + 'px'; },50); //修改上面的数值可改变文字变色速度，数值越大速度越慢 })(); </script>

---

代码演示

---

---