npm 包 colornames 使用教程

阅读时长 4 分钟读完

介绍

colornames 是一个 npm 包,提供 1653 种命名颜色的映射表,方便在前端开发中使用。这些颜色名称可以直接用在 CSS 或 JavaScript 中。

安装

使用 npm 进行安装:

使用方法

在 CSS 中使用

在 CSS 中使用 colornames 很简单,只需将颜色名称作为属性值即可:

在 JavaScript 中使用

在 JavaScript 中使用 colornames 需要引入包,并通过名称获取颜色的 RGB 值或十六进制字符串:

注意事项

  • 颜色名称不区分大小写,空格可以用连字符 - 代替;

  • 部分颜色可能会有多个名称,如红色可以用 redcrimson 表示,因此可以使用下面任意一种方式获取颜色值:

示例代码

下面是一个使用 colornames 渲染彩虹效果的示例代码:

-- -------------------- ---- -------
--------- -----
------
  ------
    ----------------- ------------
    -------
      ---- -
        ----------------- ------
      -
      -------- -
        -------- -----
        ---------------- -------
        ------------ -------
        ------- ------
      -
      -------- ---- -
        ---------- -----
        ------------ -----
        ------- - -----
        ------------ - - --- ------
      -
    --------
  -------
  ------
    ---- ----------------
      ----- ------------- ---------------
      ----- ------------- ---------------------
      ----- ------------- ---------------------
      ----- ------------- -------------------
      ----- ------------- -----------------
      ----- ------------- ---------------------
      ----- ------------- ---------------------
    ------
    ------- --------------------------------------------
    --------
      ----- ------ - ------------------
      ----- ------- - ----------------------------------- -------
      --- --- - --
      -------------- -- -
        --- -- ---
        -- ---- -- ---- --- - --
        --- ---- - - -- - - --------------- ---- -
          ---------------------- - ---------- - - - ---- ---- ------
          ---------------------- - --------------------
            ------------------------ - ---------------------------
          --
        -
      -- -----
    ---------
  -------
-------

该代码会在页面上渲染出一个彩虹效果的文字,颜色使用 colornames 提供的名称表示。可以通过修改 rainbow[i].style.color 中的 hsl() 函数参数和间隔时间来调整彩虹效果的颜色和速度。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/44144

纠错
反馈