字体随机变色

字体随机变色

字体的颜色由“color”属性设置，颜色呢，可以通过十六进制颜色、RGB颜色、RGBA颜色、HSL颜色、HSLA颜色和预定义颜色指定。

1. 十六进制颜色的组成部分：#RRGGBB，其中RR表示红色、GG表示绿色、BB表示蓝色。所有的值由0至FF定义颜色的亮度。
   <a style="color: #FF0000">红色</a>
2. RGB颜色的组成部分：RGB（红色，绿色，蓝色）。由0至255定义颜色的亮度，也可以通过百分比来定义颜色的亮度。
   <a style="color: rgb(255,0,0)">红色</a>
3. RGBA颜色是在RGB颜色原有的定义上加了一个Alpha参数，这个参数呢，就是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
   <a style="color: rgba(255,0,0,0.5)">红色</a>
4. HSL颜色的组成部分：HSL（色相，饱和度，亮度）。色相是在色轮上的程度（从0到360），其中0和360是红色，120是绿色，240是蓝色。饱和度意味着色彩的鲜艳程度，用百分比表示，0%表示灰色，100%表示色彩与纯色无差别。亮度也是通过百分比表示，0%表示是黑色，100%是白色。
   <a style="color: hsl(0,100%,50%)">红色</a>
5. HSLA颜色在HSL颜色原有的定义上加了一个Alpha参数用来定义不透明度（0.0至1.0）。
   <a style="color: hsla(0,100%,50%,0.5)">红色</a>
6. 预定义颜色就是固定的颜色名字了，CSS拥有17种合法的预定义颜色名字。它们是：aqua（水绿）、black（黑）、blue（蓝）、fuchsia（紫红）、gray（灰）、green（绿）、lime（浅绿）、maroon（褐）、navy（深蓝）、olive（橄榄）、purple（紫）、red（红）、silver（银）、teal（深青）、white（白）、yellow（黄）和transparent（透明）。
   <a style="color: red">红色</a>

其中，十六进制颜色、RGB颜色、RGBA颜色、HSL颜色和HSLA颜色都可以通过JavaScript实现随机变色，如下所示（注意：引入jquery插件）。
jquery-3.4.1.min.js下载链接
提取码：y6ni

• 十六进制颜色

setInterval(function(){
	//十六进制数组
	var array = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
	var color = "";
	for(var i=0;i<6;i++){
		color+=array[Math.floor(Math.random()*16)];//从十六进制数组中随机取一个数
	}
	$("a").css("color","#"+color);
},100);

• RGB颜色

setInterval(function(){
	var color = "(";
	for(var i=0;i<3;i++){
		color+=Math.round(Math.random()*255);
		if(i<2){
			color+=",";
		}
	}
	color+=")";
	$("a").css("color","rgb"+color);
},100);

• RGBA颜色

setInterval(function(){
	var color = "(";
	for(var i=0;i<3;i++){
		color+=Math.round(Math.random()*255)+",";
	}
	color+=Math.round(Math.random()*100)+"%)";
	$("a").css("color","rgba"+color);
},100);

• HSL颜色

setInterval(function(){
	var color = "("+Math.round(Math.random()*360);
	for(var i=0;i<2;i++){
		color+=","+Math.round(Math.random()*100)+"%";
	}
	color+=")";
	$("a").css("color","hsl"+color);
},100);

• HSLA颜色

setInterval(function(){
	var color = "("+Math.round(Math.random()*360);
	for(var i=0;i<3;i++){
		color+=","+Math.round(Math.random()*100)+"%";
	}
	color+=")";
	$("a").css("color","hsla"+color);
},100);