今天在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中文网其他相关文章！