天下无坑

天下无坑


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

<p><a href="https://www.cnblogs.com/xosg/p/7516463.html" title="Color.js 增强你对颜色的控制">Color.js 增强你对颜色的控制</a></p> <pre><code class="language-html">&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文字效果&lt;/title&gt; &lt;style&gt; .container { padding: 0 20%; text-align: center; } .txt1, .txt2 { font-size: 28px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="txt1"&gt;文字效果1&lt;/div&gt; &lt;div class="txt2"&gt;文字效果2&lt;/div&gt; &lt;/div&gt; &lt;script src="https://unpkg.com/color-js@1.0.3/color.js"&gt;&lt;/script&gt; &lt;script&gt; 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()); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre>

页面列表

ITEM_HTML