顏色漸變的文字

2024-09-05 12:21:29

字體：大中小

來源：轉載

供稿：網友

JavaScript實現的一個特效，顏色漸變的文字，示例中的文字比較少，你可以多粘貼一些文字測試，文字越多效果越漂亮，每一行有漸變，而且每行與每行也是一種漸變

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>顏色漸變的文字</title><script language="javascript">function Delta(sHex1,sHex2,iNum){	//計算每個字的變化量	var iHex1 = parseInt("0x"+sHex1);	var iHex2 = parseInt("0x"+sHex2);	return (iHex2 - iHex1)/(iNum-1);}function Colorful(sText,sColor1,sColor2){	if(sText.length<=1){		//如果只有一個字符，漸變無從談起，直接輸出并返回		document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");		return;	}	//RGB三色分離，分別獲取變化的小量delta	var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);	var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);	var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);	var sColorR = parseInt("0x"+sColor1.substring(0,2));		var sColorG = parseInt("0x"+sColor1.substring(2,4));	var sColorB = parseInt("0x"+sColor1.substring(4,6));	for(var i=0;i<sText.length;i++){		document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");		/*每輸出一個字符，顏色的三個分量都相應的變化		當字符輸出完成時，正好由sColor1變成sColor2*/		sColorR += fDeltaR;		sColorG += fDeltaG;		sColorB += fDeltaB;	}}Colorful("這一段文字的顏色可由紅變藍，由藍變綠，再由綠變黃，呵呵，有意思吧，這要感謝Javascript和CSS哦。","FF3300","3366FF");</script></head><body></body></html>

上一篇：漸隱漸出式文字交替顯示特效

下一篇：文本重疊顯示特效