字体随机变色

一时失言乱红尘 2023-06-27 05:57 1阅读 0赞

# 字体随机变色 #

> 字体的颜色由“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下载链接][jquery-3.4.1.min.js]  
> 提取码：y6ni  
> ![在这里插入图片描述][20210612194402668.png_pic_center]

*  十六进制颜色

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);

[jquery-3.4.1.min.js]: https://pan.baidu.com/s/102bb9tmR5hWF2EWYhtbGMw
[20210612194402668.png_pic_center]: https://img-blog.csdnimg.cn/20210612194402668.png#pic_center