js如何做出彩色字体颜色变化

   在介绍如何实现彩色字体颜色变化前，我想让大家了解 什么是颜色模式

以前主要采用关键字、16进制和RGB这三种设置颜色的方式。CSS3出现后，增加了RGBA、HSL、HSLA这三种模式，极大地丰富了CSS颜色设置的方式

命名颜色

直接使用的名字的颜色值称为命名颜色

16进制

16进制是设置颜色值的常用方式，将三个介于00-FF的十六进制数连接起来，若16进制的3组数各自成对，则可简写为3位

RGB模式

通过红绿蓝三种颜色不同占比创造出的颜色是RGB模式的颜色。显示器是由一个个像素构成

RGBA模式

rgba模式是在RGB基础上增加了alpha通道，用来设置颜色的透明度，其中这个通道值的范围是0-1。0代表完全透明，1代表完全不透明

HSL模式

HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色

HSLA模式

HSLA模式是HSL的扩展模式，在HSL的基础上增加一个透明通道alpha来设置透明度

---

上述对比中我们可知 HSL无疑是实现最优选 ```css hsl(h,s,l) ``` 　　h:色调(hue)可以为任意整数。0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红(当h值大于360时，实际的值等于该值模360后的值)

s:饱和度(saturation)，就是指颜色的深浅度和鲜艳程度。取0-100%范围的值，其中0表示灰度(没有该颜色)，100%表示饱和度最高(颜色最鲜艳)

l:亮度(lightness)，取0-100%范围的值，其中0表示最暗(黑色)，100%表示最亮(白色)

---

了解了颜色模式，我们来设计脚本

首先我们需要一个变量来记录当前hue值

var h = 0

setInterval(()=>{
    h++;
    if(h >= 360)h = 0;//hue到达最大值时重置
    document.querySelectorAll(".colorfulFont").forEach(item=>{
        item.style.color = `hsl(${h},100%,50%)`
    })
},10)

在这里,所有class="colorfulFont"的字体颜色都会变成彩色

我们再用一个HTML测试

<span class="colorfulFont">你好</span>
<script>
    var h = 0;
    setInterval(()=>{
        h++;
        if(h >= 360)h = 0;//hue到达最大值时重置
        document.querySelectorAll(".colorfulFont").forEach(item=>{
            item.style.color = `HSL(${h},100%,50%)`
        })
    },10)
</script>

这就是本篇文章的全部内容，喜欢的请点赞