助CSS提供的animation與transform及filter濾鏡等屬性，我們可以使用CSS設置出精美的動畫效果，進一步可以使用CSS對HTML頁面基本元素、圖標等進行動畫設計，如按鈕效果，頁面加載圖標等。本文主要介紹加載圖標動畫設計，并進行實例分析。

實現要求及展示

本例設計實現自動旋轉的加載圖標設計，在圖標旋轉過程中，動態改變顏色與狀態，實現效果如下所示：

基本語法說明

本例設計效果描述如上所示，一方面需要實現旋轉效果，另一方面需要實現顏色變化，所需掌握知識點主要包括CSS濾鏡filter，動畫屬性animation與@keyframes關鍵幀的定義等。各類所需基本語法說明如下：

1、flex布局

通過使用flex布局實現動畫層在web頁面中進行布局與定位，本例應用到justify-content屬性與

align-items屬性實現動畫層在頁面水平與垂直方向進行居中顯示。

2、before與after偽元素

偽元素是在html文件代碼中不存在的元素，但是其能夠在網頁瀏覽時表現出行為與效果，與真實存在的元素類似。其中before指在元素前加入的內容，after表示在元素后加入的內容。如我們在頁面中定義一個DIV層，則可使用before在前前添加新的內容，顯示不同效果。代碼如下：

在該實例中我們在dv表示的層之前添加了一個新的層效果，即.dv:before所定義的部分，頁面實際代碼中只有一個黃色層，生成的偽元素層為綠色層，實現效果如下：

3、線性漸變與透明度漸變

CSS提供元素原色的漸變效果，主要漸變類型包括徑向漸變與線性漸變。本例需要使用線性漸變實現背景效果。線性漸變（Linear Gradients）可以實現顏色漸變、透明的漸變等。如：

linear-gradient(0deg, blue, green 40%, red);

表示:從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束;將其應用到我們偽元素定義案例中則可呈現如下效果：

除使用以上方法實現漸變之外，還可以對透明度進行漸變設置，需要使用transparent參數表示透明。如：

linear-gradient(0deg,transparent,transparent 40%,red);則表示按照透明度進行漸變；

透明線性漸變效果如下圖所示：

4、圓形DIV與邊緣模糊設置

圓形DIV主要通過border-radius屬性設置，當其值設置為50%時即可形成圓形，邊緣模糊主要通過濾鏡filter實現。使用blur()設置高斯模糊。實例效果如下所示：

本例實現效果描述如上圖所示，其中外層div設置radius為50%，內層綠色部分設置高斯模糊。

5、動畫與旋轉基本知識

動畫效果主要通過animation屬性與@keyframes進行設置，前文已經進行了說明，本文不再詳細說明，如需閱讀，請自行查閱。

實現代碼描述

旋轉的加載動態效果基于以上基本語法進行設計與開發，實現主要代碼表述如下：

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！

代 CSS 顏色規范

新的 CSS Color Module 規范引入了多種新的顏色表示法. 可以支持多種色彩空間和顏色模型. 這解鎖了很多的玩法. 比如: 基于一個顏色生成更深或更淺的顏色; 根據背景自適應文本色; 使用廣色域顏色等等.

CSS Color Module Level 4 規范

引入了新的顏色表示法, 同時引入了多種色彩空間, 不再僅限于sRGB, 這些方法現代瀏覽器均已支持:

• 基于 sRGB 色彩空間的方法: hsl(), hwb(), rgb();
• 基于 CIELAB 色彩空間的方法: lab(), lch();
• 基于 Oklab 色彩空間的方法: oklab(), oklch();
• 其它色彩空間的方法: color()

再補充一點, 這些新方法中:

• 帶 h 的是使用極坐標的顏色空間: hsl, hwb, lch, oklch
• color()使用任意 color-gamut CSS 媒介功能支持的顏色空間
• 其它使用的是直角坐標系的顏色空間: rgb, lab, oklab

CSS Color Module Level 5 規范

• 引入工具方法: color-mix(), 現代瀏覽器均已支持.
• 擴展CSS Color Module Level 4 引入的新方法, 是它們支持相對顏色表示法. 相對顏色表示法絕大多數現代瀏覽器已支持.

CSS Color Module Level 6 規范

• 引入工具方法: color-contrast(), 目前還沒有瀏覽器支持, 但使用Level 4和Level 5中的工具和方法就可以實現.

在詳細介紹這些現代新方法之前有必要對一些術語進行解釋:

名詞解釋:

• 顏色模型(color model)

顏色模型是指顏色與坐標系之間的映射和編碼方式, 它定義維度分量與色彩空間的關系. 一個顏色模型就會有一個對應的色彩空間.

• 色彩空間(color space)

色彩空間是某一顏色模型所涵蓋的顏色的定義和命名. 每個顏色空間都由數學模型和關聯的規則集定義. 色彩空間是表示顏色的三維網格, 色彩空間中的每個顏色都由三個通道分量(維度)來表示. 每個顏色空間都有一個定義的色域。

• 色域(color gamut)

色域指的是它可以表示的特定顏色的范圍, 通常指設備可以顯示的顏色范圍. 如 sRGB, P3, Rec2020 等

可以看出三者有一些共性的東西, 通常來說, 當上下文中使用顏色空間時強調的是它的顏色模型和算法. 當使用色域時強調的是能不能顯示某些顏色

CSS Color Module Level 4 新引入的顏色方法統一了帶和不帶alpha通道的表示法

比如, 以前用的最多的rgb方法, 帶和不帶alpha通道是不同的方法: 不帶alpha通道的是: rgb(r, g, b), 而帶alpha通道的是: rgba(r, g, b, a)

現在可以統一使用: rgb(R G B [/ A]), alpha通道值是可選的. 注意為了區分舊方法, 新方法不使用逗號分隔分量, 而是用空格替代.

上面只是拿rgb方法舉了個例子, 其實Level 4 中的所有新方法都支持這種表示法. 如: oklch(L C H [/A])

CSS Color Module Level 5 相對顏色表示法

語法: rgb(from <color> R G B[ / A]), hsl(from <color> H S L [/A]), oklch(from <color> L C H [/A]), ...

相對顏色是指從一個指定顏色的色彩空間轉換到目標色彩空間, 通過對目標色彩空間中的維度變量進行微調后的結果作為輸出.

這聽起來比較繞, 簡單點說就是可以根據原色, 對維度變量進行微調后輸出. 主要特性:

1. 可以從任意色彩空間轉換到目標色彩空間, 甚至是CSS自定義屬性.
2. 轉換后可以使用目標色彩模型中的維度變量
3. 維度分量可以使用calc()等CSS函數計算

這3個特性解鎖了一些原本只能通過js才能實現的一些功能.

例子1: 鼠標覆蓋按鈕時加深背景色:

方法1: 使用Level 5 規范中的相對顏色表示法:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: oklch(from var(--btn-bg) calc(l - 0.1) c h);
}

這個例子中--btn-bg自定義屬性可以更改為任意顏色, 本例中使用了oklch作為目標色彩空間, 因為oklch可以做到調整亮度而不會影響色相.

從這個例子中可以看出, CSS自定義屬性與相對顏色的結合使用, 可以創造出很多的新玩法.

方法2: 使用Level 5 規范中的color-mix()方法

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: color-mix(in oklch, var(--btn-bg), black 10%);
}

color-mix()方法的意思是將顏色1和顏色2先轉換到in關鍵字指定的目標色彩空間, 然后按百分比混合它們后輸出.由于black只有L分量, 因此混合只影響了L分量, 因此就得到了不改變色相的情況下加深了顏色.

例子2: 根據不同背景色自適應高對比度的文本色

這個場景需要一種方式確定高對比度的算法模型. 通用的是WCAG 2.1, 但它不太準確, 還有一種是APCA, 它相對準確性更高, 參考性更大. 在APCA算法下, 采用oklch顏色模型下L分量在72%左右是一個比較好的對比度分界線. 72%以上采用黑色文本, 72%以下采用白色文本.

好了, 有了這個基礎, 現在可以使用純CSS實現自適應高對比度的文本色:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: oklch(from var(--btn-bg) clamp(0, calc((0.72 - l) * 10000), 1) 0 0);
}

這個例子中--bg自定義屬性可以更改為任意顏色, 按鈕文本都可以自適應的高對比度顏色. 本例中使用了oklch作為目標色彩空間, 因為oklch可以做到亮度是可預測性.

這里稍微解釋這句:clamp(0, calc((0.72 - l)* 10000), 1), 意思是背景色的l維度分量 > 0.72說明背景是淺色的, 那么文本色的L分量就取0即黑色, 否則就說明背景是深色的,L分量就取1即白色. 如果不想純白或純黑, 適當調整各分量以及L的上下界即可.

這個例子還可以使用CSS Color Module Level 6中的color-contrast()實現相同的效果, 但目前還沒有瀏覽器支持, 留著將來備用:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: color-contrast(var(--btn-bg) vs white,black);
}

color-contrast()的意思是選擇vs關鍵字之后與第一個參數指定的顏色對比度最高的顏色作為輸出.

這么多CSS顏色新方法, 我應該使用哪個?

現代網頁中推薦使用oklch顏色模型, 使用 OKLCH 的好處:

• OKLCH 各分量是獨立的,互不影響的, 對一個分量的修改不會影響其它分量. 而 hsl()不是.
• OKLCH 使設計師無需手動選擇每種顏色。他們可以定義一個公式，選擇幾種顏色，并自動生成整個設計系統調色板。
• OKLCH 可用于任意色域, 標準色域 sRGB, 廣色域 P3, Rec2020 等。例如，新設備(如 Apple 的設備)可以顯示比舊 sRGB 顯示器更多的顏色，我們可以使用 OKLCH 來指定這些新顏色。而且超出色域瀏覽器會呈現最接近的顏色
• 與 hsl() 不同，OKLCH 更適合顏色修改和調色板生成。因為它使用的是感知亮度, 因此不會再出現意想不到的結果，比如在 Sass 中使用 darken() 產生的意外結果。
• 憑借其可預測的亮度 L, OKLCH 提供了更好的 a11y。
• 隨著 CSS 相對顏色函數的瀏覽器普及, 可以很方便的微調顏色(比如根據基色生成強調色, 只需修改 L 分量), 也將不再需要js偵測背景色的高對比度文本色. 根據 APAC 對比度算法,在感知亮度 L >=72% 時所有色相下黑色文本都不會產生對比度的可訪問性問題.
• 與 rgb() 或十六進制(#ca0000)不同，OKLCH 是人類可讀和可預測的。您只需查看數字即可快速輕松地知道 OKLCH 值代表哪種顏色。OKLCH 的工作方式類似于 HSL，但它對亮度的編碼比 HSL 更好。

OKLCH 顏色由亮度(明度)、色度(飽和度或純度)、色相三個維度組成, 這也是人類認知里的顏色的三個基本屬性.

• 亮度(lightness) 是感知亮度，取值: 0-1 或 0-100%，0為黑色，1或100%為白色，"感知"意味著它對我們的眼睛具有一致的亮度,并且是可預測的, 這與 hsl()中的 L 是不同的。
• 色度(chroma) 從灰色到最飽和的顏色, 對于 P3 和 sRGB 顏色空間應低于 0.37, Rec2020 顏色空間應低于 0.4
• 色相(hue) 在色環中的角度, 色環: 紅、橙、黃、綠、青、藍、紫。紅為20度左右, 每個顏色間隔50度左右.

詳細分析請看這篇文章: OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

為了兼容性考慮或想在js中使用CSS相同的顏色功能怎么辦?

使用這個 colorjs.io npm包即可. 它完全支持CSS Color Module Level 4 和 Level 5 的規范

新的CSS Color Module規范產生的影響:

1. 瀏覽器原生的顏色選取器元素需要更新以支持新的顏色模型, 目前還沒有瀏覽器實現.
2. 現有第三方的顏色選取器組件都是基于sRGB的, 不能選取新的色彩空間中的顏色. 這些組件需要重構.

我們的正式開源輕量級的基于Tailwindcss的React 組件庫中的顏色選取組件正在重構中