日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

是不是非常醒目呢?

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(成都創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的服務(wù)器托管,四川各地服務(wù)器托管,服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：13518219792

另外，還有那種可以根據(jù)進(jìn)度自動(dòng)變色的進(jìn)度條，如下：

其實(shí)通過(guò)純 CSS 也能實(shí)現(xiàn)這樣的邏輯判斷，主要用到了 CSS 變量和邊界值計(jì)算，現(xiàn)在分享一下：

一、基本數(shù)學(xué)原理

CSS 中并沒(méi)有直接的 if 判斷邏輯。要實(shí)現(xiàn)這樣一種效果，必須充分利用 CSS calc 的計(jì)算特性和臨界條件。

假設(shè)要實(shí)現(xiàn)這樣一個(gè)邏輯：

--x默認(rèn)值為 10，當(dāng)變量--y大于等于 100 時(shí)，--x變?yōu)?20。

如何實(shí)現(xiàn)呢?這里先給出答案，然后進(jìn)行分析：

--x: clamp(10,(var(--y) - 99) * 99,20)

這里用到了 clamp函數(shù)，你可以理解為一個(gè)區(qū)間，有 3 個(gè)值 [Min, Val, Max]，前后分別是最小、最大值，中間是動(dòng)態(tài)值，這里其實(shí)就是一個(gè)簡(jiǎn)單的線性函數(shù)，并且單調(diào)遞增，所以這里的邏輯就是：

當(dāng)--y小于 100 時(shí)，比如 99，(var(--y) - 99) * 99 的計(jì)算結(jié)果是 0，再小就是負(fù)數(shù)了，在 [10, 20] 區(qū)間中取較小值，所以最終結(jié)果是 10。

當(dāng)--y大于等于 100 時(shí)， 比如 100 ，(var(--y) - 99) * 99 的計(jì)算結(jié)果是 99，在 [10, 20] 區(qū)間中取較大值，所以最終結(jié)果是 20。

用一張圖表示如下：

為什么這里需要乘以 99 呢?其實(shí)是一個(gè)放大插值的操作，嚴(yán)格來(lái)講，這個(gè)例子中只要大于 20 就夠了，當(dāng)乘以 20 以后，范圍就變成了 ...、-20、0、 20、40、...，也是包含 [10, 20] 這個(gè)區(qū)間的。

這個(gè)就是CSS 中 if 判斷的基本原理了，用到了一點(diǎn)點(diǎn)數(shù)學(xué)運(yùn)算，接下來(lái)看實(shí)戰(zhàn)效果。

二、通過(guò)飽和度變化

首先簡(jiǎn)單布局一下；

由于純 CSS 無(wú)法獲取到數(shù)值的大小，這里需要借助 CSS 變量進(jìn)行計(jì)算，所以 HTML 可以這樣。

1閱讀
99閱讀
102閱讀

如果不考慮 HTML 語(yǔ)義或者 SEO 這類因素，這里的“數(shù)字”和“閱讀”都可以通過(guò)偽元素來(lái)生成；

num::before {
  counter-reset: num var(--num);
  content: counter(num);
}
num::after {
  content: '閱讀';
}

于是，HTML 可以進(jìn)一步簡(jiǎn)化為：

簡(jiǎn)單修飾后效果如下：

由于是灰色和褐色之前的變化，一種簡(jiǎn)單的方式是通過(guò)飽和度來(lái)控制，比如這里褐色的顏色是#aa540e，用 hsl 顏色表示就是 hsl(27, 50%, 36%)，如下：

這里飽和度可以控制顏色的鮮艷程度。飽和度越高，顏色越鮮艷，飽和度越低，顏色越暗淡，當(dāng)飽和度降為 0，就變成徹底的灰色了，如下：

所以，這里要實(shí)現(xiàn)兩種顏色的切換，可以通過(guò)計(jì)算飽和度，具體規(guī)則就是。

當(dāng) --num大于等于 100 時(shí)，飽和度為 85%，否則為 0%，利用前面一節(jié)的基本原理，所以實(shí)現(xiàn)就是。

num{
  --s: clamp(0%,(var(--num) - 99) * 99%,85%);/* >100 */
  color: hsl(27 var(--s) 36%);
}

邏輯和前面一致，這就不重復(fù)了，實(shí)際效果如下：

Kapture 2022-04-21 at 15.55.20

由于飽和度本身也有“閾值”，當(dāng)飽和度低于 0% 時(shí)，仍然按照 0% 來(lái)渲染，所以上面實(shí)現(xiàn)可以去除最小值，簡(jiǎn)化后如下：

num{
  --s: min((var(--num) - 99) * 99% ,85%);
  color: hsl(27 var(--s) 36%);
}

同樣能達(dá)到相同的目的。

三、完全顏色控制

雖然飽和度變化控制比較容易，只需要控制一個(gè)參數(shù)就行了，但還是有些局限性。

首先，這個(gè)灰色可能并不是設(shè)計(jì)師想要的灰色(實(shí)際可能會(huì)偏淡一點(diǎn))，再者，顏色變化不夠自由，比如，默認(rèn)是一個(gè)藍(lán)色，超出一定數(shù)量后變成紅色，這種就無(wú)法控制了。

于是，我們需要用完全解析的方式來(lái)實(shí)現(xiàn)，原理其實(shí)就對(duì)顏色的 3 個(gè)參數(shù)進(jìn)行控制，rgb 或者 hsl 都可以，假設(shè)兩個(gè)顏色分別是rgb(29 125 250)和rgb(244 67 54)，如下：

這里不僅有遞增的變化，也有遞減的變化(比如，125 => 67、250 => 54)，所以在 calc 計(jì)算的時(shí)候需要取反，具體實(shí)現(xiàn)如下：

num{
    --r: clamp(29, (var(--num) - 99) * 999 + 29 , 250);/*29, 250*/
    --g: clamp(67, (var(--num) - 100) * -999 + 67 , 125);/*128, 67*/
    --b: clamp(54, (var(--num) - 100) * -999 + 54 , 250);/*250, 54*/
    color: rgb(var(--r) var(--g) var(--b));
}

需要注意幾點(diǎn)：

• 系數(shù)需要足夠大，這里是 999，比如第一條，當(dāng) --num 為 100 時(shí)，如果系數(shù)是 99，那么計(jì)算的結(jié)果是 99 + 29，沒(méi)有達(dá)到最大值 250，所以需要改大一點(diǎn)，比如 999。
• clamp 支持的參數(shù)必須是 [min, val, max]，min 和 max 不能對(duì)調(diào)，所以以上代碼在實(shí)現(xiàn)時(shí)做了交換。

實(shí)際效果如下：

Kapture 2022-04-21 at 16.43.24

四、自動(dòng)背景顏色變化

雖然顏色可以通過(guò)上述方式進(jìn)行自動(dòng)變化，但是還是有些不雅。

• 代碼量比較多，有些繁瑣，容易混淆，特別是前后數(shù)字的順序。
• 只適用于兩個(gè)顏色的變化，比如多種分段的顏色可能就無(wú)法實(shí)現(xiàn)了。

背景相比于單純的顏色來(lái)說(shuō)，有一個(gè)非常大的優(yōu)勢(shì)在于多層疊加，如果控制每個(gè)背景的大小，不就可以控制最終展示的顏色了嗎?

還是上面這個(gè)例子，我們先通過(guò)漸變繪制兩層背景，上面是紅色rgb(244 67 54)，下面是藍(lán)色rgb(29 125 250)，然后通過(guò)background-size來(lái)控制每一層的大小，原理是這樣的：

具體實(shí)現(xiàn)如下：

num{
  background: linear-gradient(rgb(244 67 54),rgb(244 67 54)), 
    linear-gradient(rgb(29 125 250), rgb(29 125 250));
  color: #fff;
  background-size: calc( (var(--num) - 99) * 100% ), 100%;
}

其實(shí)這個(gè)計(jì)算根據(jù)簡(jiǎn)單，解釋一下：

• 當(dāng) --num 大于等于 100 時(shí)，計(jì)算結(jié)果肯定是大于 100% 的，所以上面的紅色背景是可見(jiàn)的，整體表現(xiàn)為紅色。
• 當(dāng) --num 小于 100 時(shí)，計(jì)算結(jié)果肯定是小于等于 0% 的，即使是負(fù)數(shù)，background-size 也解析為 0%，所以上面的紅色背景是不可見(jiàn)的，整體表現(xiàn)為下面的藍(lán)色。

實(shí)際表現(xiàn)如下：

Kapture 2022-04-21 at 18.19.56

如果希望實(shí)現(xiàn)文字顏色的變化，可以利用到 background-clip。

num{
  background: linear-gradient(rgb(244 67 54),rgb(244 67 54)), 
    linear-gradient(rgb(29 125 250), rgb(29 125 250));
  color: transparent;
  background-size: calc( (var(--num) - 99) * 100% ), 100%;
  -webkit-background-clip: text;
}

Kapture 2022-04-21 at 18.29.38

是不是相比上面的方式簡(jiǎn)單了許多呢?

五、自動(dòng)變色的進(jìn)度條

背景還可以適配多種顏色。接下來(lái)看一個(gè)文章開(kāi)頭的案例，實(shí)現(xiàn)這樣一個(gè)可以自動(dòng)變色的進(jìn)度條，有這樣幾條規(guī)則：

• 當(dāng)進(jìn)度小于 30% 時(shí)，背景呈紅色。
• 當(dāng)進(jìn)度大于 30% 并且 小于 60% 時(shí)，背景呈橙色。
• 當(dāng)進(jìn)度大于 60% 并且 小于 90% 時(shí)，背景呈藍(lán)色。
• 當(dāng)進(jìn)度大于 90% 時(shí)，背景呈綠色。

示意如下：

假設(shè) HTML 如下：

可以通過(guò) CSS 偽類和計(jì)數(shù)器將 CSS 變量顯示在頁(yè)面，有興趣的可以看看張?chǎng)涡窭蠋煹倪@篇文章：小tips: 如何借助content屬性顯示CSS var變量值[1](這個(gè)案例也是在這個(gè)基礎(chǔ)上修改的)，簡(jiǎn)單修飾一下。

.bar {
  display: flex;
  height: 20px;
  background-color: #f5f5f5;
}
.bar::before {
  counter-reset: progress var(--percent);
  content: counter(progress) '%\2002';
  display: flex;
  justify-content: end;
  width: calc(var(--percent) * 1%);
  font-size: 12px;
  color: #fff;
  background: #2486ff;
  white-space: nowrap;
}

效果如下：

那么該如何根據(jù)進(jìn)度自動(dòng)變色呢?

原理還是類似的!首先，還是將幾個(gè)顏色通過(guò)漸變繪制出來(lái)，最后的顏色放在最前面，然后根據(jù) CSS 變量控制背景尺寸就行了，原理示意如下：

由于background-size本身有邊界限制，當(dāng)小于 0% 時(shí)，仍然按 0% 來(lái)渲染，所以這里可以不必用 clamp來(lái)加以限制，減少代碼量，具體代碼實(shí)現(xiàn)是這樣的：

.bar::before{
  /*其他樣式*/
  background-image: linear-gradient(green,green), 
    linear-gradient(#2486ff,#2486ff), 
    linear-gradient(orange, orange),  
    linear-gradient(red, red);
  background-size: calc( (var(--percent) - 90) * 100% ) 100%, 
    calc( (var(--percent) - 60) * 100% ) 100%,
    calc( (var(--percent) - 30) * 100% ) 100%,
    100% 100%;
}

簡(jiǎn)單看一下里面的邏輯：

• 當(dāng) --percent 大于 90 時(shí)，所有背景的尺寸都是 100%，自然顯示最上層的綠色。
• 當(dāng) --percent 大于 60 ，小于等于 90 時(shí)，只有最上層的綠色尺寸是 0，其他背景尺寸都是 100%，所以顯示第二層的藍(lán)色。
• 當(dāng) --percent 大于 30 ，小于等于 60 時(shí)，上面兩層背景尺寸都是 0，下面兩層背景尺寸都是 100%，所以顯示第三層的橙色。
• 當(dāng) --percent 小于 30 時(shí)，只有最底層的尺寸是 100%，其他都是 0，所以顯示最底層的紅色。

實(shí)際表現(xiàn)如下：

Kapture 2022-04-21 at 23.00.00

背景自動(dòng)變色已經(jīng)實(shí)現(xiàn)了，不過(guò)數(shù)字還有一點(diǎn)小問(wèn)題，當(dāng)進(jìn)度條比較小時(shí)，百分比數(shù)字明顯放不下了，如下：

所以，在這種情況下應(yīng)該把百分比數(shù)字移到外面來(lái)，并且變成紅色。

移到外面，可以通過(guò)text-indent屬性來(lái)實(shí)現(xiàn)，文字顏色從白色變成紅色(hsl(0,100%,50%))，可以通過(guò)亮度來(lái)實(shí)現(xiàn)，當(dāng)亮度為 100% 時(shí)，任何顏色都會(huì)變成白色，由于亮度本身有限制，當(dāng)超過(guò) 100% 時(shí)，仍然按照 100% 來(lái)渲染，這一點(diǎn)可以利用起來(lái)，具體實(shí)現(xiàn)如下：

.bar::before{
  /*其他樣式*/
  --l: max(50%, (var(--percent) - 9 ) * 100%);
  color: hsl(0, 100%, var(--l));
  --offset: clamp(0%, ( var(--percent) - 10 ) * -120% , 120%);
  text-indent: var(--offset);
}

這里的計(jì)算原理也和前面一樣，大家在這里可以仔細(xì)斟酌一下。

實(shí)際效果如下：

Kapture 2022-04-21 at 23.46.59

可以看到，當(dāng)百分比小于 10 時(shí)，文字是在外部的，避免了空間不足的情況，非常智能。

完整代碼可以訪問(wèn)：CSS auto color(codepen.io)[2] 或者 CSS auto color(juejin.io)[3]。

六、總結(jié)一下

以上就是關(guān)于 CSS 自動(dòng)變色技術(shù)的全部?jī)?nèi)容了，核心其實(shí)就是邊界值的靈活計(jì)算，是不是非常強(qiáng)大呢?這里總結(jié)一下實(shí)現(xiàn)要點(diǎn)：

• 實(shí)現(xiàn)原理是 CSS 變量 和 calc 計(jì)算；
• clamp 可以限制表達(dá)式的區(qū)間范圍；
• 通用核心代碼 --x: clamp(10,(var(--y) - 99) * 99,20)；
• 飽和度可以控制顏色的鮮艷程度，當(dāng)飽和度為0，就變成灰色了；
• 完全控制顏色變化，可以用 rgb 或者 hsl 完全表示出來(lái)，分別進(jìn)行計(jì)算；
• 以上方案僅適用于兩個(gè)顏色的切換；
• 多層背景疊加可以實(shí)現(xiàn)多種顏色切換；
• 多層背景切換的核心在于背景尺寸的控制；
• 亮度為 100% 時(shí)，顏色就變成了白色；
• 部分屬性本身有“閾值”，充分利用這種特性可以減少區(qū)域判斷。

當(dāng)然，這種技術(shù)不僅僅適用于顏色的變化，只要是數(shù)值的變化都可以，比如文章中text-indent的切換，充分利用這些小技巧可以讓我們的頁(yè)面更加靈活，更加精致。

新聞名稱：我們一起聊聊CSS變量自動(dòng)變色技術(shù)
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/cocichd.html