今天在CSS中使用絕對價值，符號，圓形和模塊

CSS數學函數的巧妙運用：模擬abs()、sign()、round()和mod()

CSS規範中包含許多實用的數學函數，例如三角函數、指數函數、符號相關函數（abs()、sign()）和階梯值函數（round()、mod()、rem()）。然而，這些函數並非所有瀏覽器都支持。本文將介紹如何利用現有CSS特性模擬abs()、sign()、round()和mod()函數的功能，並展示其在實際應用中的強大之處。

需要注意的是，以下技術並非為舊版瀏覽器設計的。部分技術依賴於瀏覽器對自定義屬性註冊（使用@property）的支持，目前主要限於Chromium瀏覽器。

模擬計算的等價物

• --abs (絕對值)

可以使用CSS的max()函數實現。假設有一個自定義屬性--a ，其值可能為正或負，要獲取其絕對值，可以使用以下方法：

 --abs: max(var(--a), -1*var(--a));

如果--a為正，則-1*var(--a)為負， max()返回var(--a) ；如果--a為負，則-1*var(--a)為正， max()返回-1*var(--a) 。

• --sign (符號)

利用絕對值，可以計算一個數的符號：

 --abs: max(var(--a), -1*var(--a));
--sign: calc(var(--a)/var(--abs));

重要提示：此方法僅適用於無單位的值。如果--a為0，則需要使用Houdini支持註冊--sign屬性，並設置初始值為0：

 @property --sign {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}</integer>

對於整數，可以使用clamp()函數簡化：

 --sign: clamp(-1, var(--a), 1);

此方法僅適用於無單位值，且絕對值至少為1的整數。對於小數，需要改進方法，例如：

 --lim: .000001;
--sign: clamp(-1, var(--a)/var(--lim), 1);

• --round 、 --ceil和--floor (舍入、向上取整和向下取整)

這需要註冊自定義屬性，並強制將其類型設為整數：

 @property --round {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem { --round: var(--a); }</integer>

--ceil和--floor可以通過加減0.5實現：

 @property --floor {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

@property --ceil {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem {
  --floor: calc(var(--a) - .5);
  --ceil: calc(var(--a) .5);
}</integer></integer>

• --mod (取模)

基於--floor實現：

 @property --floor {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem {
  --floor: calc(var(--a)/var(--b) - .5);
  --mod: calc(var(--a) - var(--b)*var(--floor));
}</integer>

應用案例

• 動畫中的對稱效果

可以使用絕對值來創建對稱的動畫延遲：

 --m: calc(.5*(var(--n) - 1));
--abs: max(var(--m) - var(--i), var(--i) - var(--m));
animation-delay: calc(var(--abs)/var(--m)*#{$t}) infinite backwards;

• 根據選中項調整樣式

可以使用符號函數來判斷元素在選中元素之前還是之後，從而應用不同的樣式。

• 時間格式化

可以使用floor()和mod()函數來格式化時間：

 --min: max(0, var(--val)/60 - .5);
--sec: calc(var(--val) - var(--min)*60);

更多案例請參考原文。

總而言之，通過巧妙運用CSS現有特性，可以模擬實現一些數學函數，從而在CSS中實現更複雜的動畫和样式效果，無需依賴JavaScript。 這為CSS的創造性應用提供了更廣闊的空間。

以上是今天在CSS中使用絕對價值，符號，圓形和模塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！