僅CSS的星級等級組件等等！（第2部分）-css教學-PHP中文網

首頁

web前端

css教學

僅CSS的星級等級組件等等！（第2部分）

Joseph Gordon-Levitt

Apr 22, 2025 am 10:23 AM

僅CSS的星級等級組件等等！（第2部分）

在上一篇文章中，我們構建了一個僅CSS的星級評級組件，利用CSS掩碼， border-image和增強的attr()函數。由此產生的代碼提供了創建變化的適應性，例如心臟評分和音量控制。

此後續活動探索了使用滾動驅動的動畫的更通用的方法。我們將利用基於滾動的動畫的力量，而不是border-image方法。

這是使用此新技術實現的同一星級評級組件。由於其實驗性質，最佳觀看需要Chrome 115（Safari和Firefox支持待處理）。

注意關鍵區別：星顏色動態反映選擇數 - border-image方法不可能的壯舉。

為了完全理解，強烈建議審查第一篇文章，因為本部分基於其概念和技術。

重要說明：在寫作時，只有Chrome 115和Edge 115完全支持此處使用的功能。跟隨時，請使用這些瀏覽器之一。

###為什麼要滾動驅動動畫？

將捲軸驅動的動畫應用於靜態星級評分組件似乎是違反直覺的。滾動驅動動畫的MDN解釋最初增加了混亂：

它使您可以根據基於滾動的時間表的進程而不是基於默認的基於時間的文檔時間表來對屬性值進行動畫化。這意味著您可以通過滾動可滾動元素而不是通過時間來使元素動畫。

但是，MDN闡明存在兩種基於捲軸的時間表：滾動進度時間表並查看進度時間表。我們將利用後者：

您可以根據滾動器內部的元素（稱為主題）的可見性變化來進行此時間表。滾動器內部對象的可見性是作為進度的百分比跟踪的 - 默認情況下，當受試者在滾動器的一個邊緣上首先可見時，時間軸為0％，當它到達相反的邊緣時100％。

CSS-Tricks年鑑提供了另一個有用的view-timeline-name定義。

通過將拇指元素視為主題，將輸入元素視為滾動器，該概念變得更加清晰。輸入區域內的拇指運動改變了其可見性，從而創造了一個基於百分比的進度，我們可以用來為輸入設置樣式。從本質上講，我們正在復制document.querySelector("input").value ，但純粹是用CSS！

實施詳細信息

讓我們檢查代碼：

 @property -Val {
  文法:"<number> ”
  繼承：正確；
  初始值：0; 
}

輸入[type =“ range”] {
   -  min：attr（min類型（最低）類型（<number> ）;
  -max：attr（max type（max type）（<number> ）;

  時間軸範圍：-Val;
  動畫： -  Val線性兩者；
  動畫台式：-Val;
  動畫範圍：條目100％退出0％；
  溢出：隱藏；
}

@KeyFrames -Val {
  0％{ -  Val：var（-max）}
  100％{ -  val：var（-min）}
}

輸入[type =“ range”] :: thumb {
  視圖 - 台式： -  val inline;
}</number></number></number>

這可能看起來很複雜，但是逐條分解簡化了它。

主題和滾動器

我們使用view-timeline速記來定義主題（拇指）：

view-timeline CSS Shorthand屬性定義了一個命名的視圖進度時間表，該時間表根據可滾動元素（滾動器）中元素（主題）的可見性更改進行進展。 view-timeline是對該主題設置的。

時間軸名稱為--val ，軸為inline （水平）。

接下來，我們用溢出來定義滾動器（輸入） overflow: hidden （或overflow: auto ）。至關重要的是，不要忘記滾動器上的overflow ！沒有它，瀏覽器將定義滾動器，有可能導致意外結果。

動畫片

動畫使用增強的attr()函數修改輸入的min和max之間的--val變量。該動畫使用animation-timeline 。 @property規則註冊動畫變量。

timeline-scope也是至關重要的。命名的視圖時間表通常範圍範圍為元素及其後代。由於輸入是拇指的父母，因此我們使用timeline-scope擴大了範圍。

密鑰幀值倒置（ min為100％， max為0％），因為動畫始於拇指在右側（最大值）並在左側結束（最小值）。這反映了水平滾動元素的行為，該元素從右側出現並消失向左。

動畫範圍

animation-range: entry 100% exit 0%;至關重要。默認情況下，動畫從主題從右側進入滾動器並從左側退出時結束時開始。由於拇指不會溢出，我們調整了範圍，因此當拇指完全在滾動器內並開始離開時結束時，動畫開始了。

重複使用--val是指動畫變量，命名的視圖時間軸和鍵框，所有這些都共享相同的名稱，以提高清晰度。使用不同的名稱可以增強可讀性。

星級評分組件

核心工作涉及獲得輸入的價值。其餘代碼樣式組件，從第一篇文章中汲取：

輸入[type =“ range”] {
  背景： 
    線性梯度（90級，
      HSL（calc（30 4 * var（-val））100％56％）calc（var（-val） * 100％ / var（-max）），
      ＃7B7B7B 0
    ）；
}
輸入[type =“ range”] :: thumb {
  不透明度：0;
}

拇指是隱藏的，梯度基於--val變量為星星顏色。梯度的顏色還使用hsl()動態變化。

完整的演示（推薦Chrome 115）展示了該功能，包括通過調整輸入的屬性來顯示半明星支持。