天下无坑

天下无坑


Color.js 增强你对颜色的控制

[Color.js 增强你对颜色的控制](https://www.cnblogs.com/xosg/p/7516463.html "Color.js 增强你对颜色的控制")

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>文字效果</title>
  <style>
    .container {
      padding: 0 20%;
      text-align: center;
    }

    .txt1,
    .txt2 {
      font-size: 28px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="txt1">文字效果1</div>
    <div class="txt2">文字效果2</div>
  </div>
  <script src="https://unpkg.com/color-js@1.0.3/color.js"></script>

  <script>
    var Color = net.brehaut.Color;
    //测试颜色
    var Green = Color("#00FF00");
    var Red = Color({ hue: 0, saturation: 1, value: 1 });
    var Blue = Color("rgb(0,0,255)");
    var Cyan = Color({ hue: 180, saturation: 1, lightness: 0.5 });
    var Magenta = Color("hsl(300, 100%, 50%)");
    var Yellow = Color([255, 255, 0]);

    console.log(Green.shiftHue(45).darkenByRatio(0.5).desaturateByAmount(0.1).toCSS());

    console.log(Green.toCSS(), Red.toCSS(), Blue.toCSS());

  </script>
</body>

</html>

页面列表

ITEM_HTML