**CSS** `@property`：注册自定义属性，让变量也能动起来！

CSS `@property`：给你的变量加点戏，让它们舞起来！

大家好！今天咱们来聊聊 CSS 里一个挺酷炫的家伙：@property。估计不少同学看到这玩意儿的时候，心里嘀咕：“啥玩意儿？ @property？这是要搞啥飞机？” 别急，咱慢慢唠。

想象一下，咱们平时写 CSS，定义一些变量，比如颜色、大小、字体啥的。这些变量就像是舞台上的静态道具，摆在那里一动不动，需要的时候拿来用一下。但是，如果这些道具能动起来呢？比如颜色能平滑过渡，大小能优雅变化，字体能像跳华尔兹一样旋转，是不是更带劲？

@property 就是干这个的！简单来说，它让咱们可以注册自定义 CSS 属性，告诉浏览器这个属性是什么类型的，初始值是多少，以及如何进行过渡和动画。这样，咱们的变量就不再是冷冰冰的静态值，而是可以拥有生命的“活物”，能在页面上翩翩起舞，让你的设计更加生动有趣。

为什么需要 @property？

你可能会说：“我用 CSS transition 和 animation 不也能实现动画效果吗？干嘛还要费劲巴拉地注册自定义属性？”

说得没错，transition 和 animation 确实是 CSS 动画的利器。但是，它们也有一些局限性：

类型限制： transition 和 animation 只能对浏览器原生支持的属性进行动画，比如 color、width、opacity 等。如果你想对一些自定义的 CSS 变量进行动画，那就有点力不从心了。比如，你想让一个表示角度的变量从 0 度平滑过渡到 360 度，直接用 transition 可能会遇到问题。
数值插值： 浏览器在进行动画时，会对属性值进行插值计算。但是，对于一些复杂的属性值，比如渐变色、阴影等，浏览器可能无法正确地进行插值，导致动画效果不理想。想象一下，你想让一个渐变色从红色过渡到蓝色，结果浏览器给你插值成了一坨奇怪的颜色，是不是很崩溃？

@property 的出现，就是为了解决这些问题。它可以让你明确地告诉浏览器自定义属性的类型，初始值，以及如何进行插值计算。这样，浏览器就能按照你的指示，正确地对自定义属性进行动画，让你的动画效果更加可控和完美。

@property 怎么用？

@property 的语法有点像 @keyframes，都是以 @ 开头的。它的基本结构如下：

@property --my-custom-property {
  syntax: '<type>';
  inherits: true | false;
  initial-value: <value>;
}

--my-custom-property： 这是你要注册的自定义属性的名字。记住，自定义属性的名字必须以两个短横线 -- 开头。
syntax： 这个属性指定了自定义属性的类型。它可以是以下值之一：
- *：表示任何类型的值。
- <number>：表示数字类型的值，比如 10、3.14。
- <percentage>：表示百分比类型的值，比如 50%。
- <length>：表示长度类型的值，比如 10px、2em。
- <color>：表示颜色类型的值，比如 red、#ff0000。
- <image>：表示图像类型的值，比如 url(image.png)。
- <integer>：表示整数类型的值，比如 1、2。
- <angle>：表示角度类型的值，比如 45deg、0.5turn。
- <time>：表示时间类型的值，比如 1s、500ms。
- <resolution>：表示分辨率类型的值，比如 300dpi、2x。
- <transform-list>：表示 transform 列表类型的值，比如 rotate(45deg) scale(1.2)。
- <custom-ident>：表示自定义标识符类型的值，比如 my-keyword。
- 你可以用更复杂的语法来描述更具体的类型，比如 <color> | <length> 表示颜色或长度类型。
inherits： 这个属性指定了自定义属性是否可以被继承。如果设置为 true，则子元素会继承父元素的属性值。如果设置为 false，则子元素不会继承父元素的属性值。
initial-value： 这个属性指定了自定义属性的初始值。当自定义属性没有被显式设置时，会使用这个初始值。

举个栗子：让背景颜色跳起华尔兹

咱们来举个简单的例子，让一个元素的背景颜色从红色平滑过渡到蓝色。

首先，咱们需要注册一个自定义属性 --bg-color，指定它的类型为 <color>，初始值为 red。

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

然后，咱们给一个元素设置这个自定义属性，并添加一个 transition 效果。

.box {
  width: 200px;
  height: 200px;
  background-color: var(--bg-color);
  transition: --bg-color 1s ease-in-out;
}

.box:hover {
  --bg-color: blue;
}

当鼠标悬停在 .box 元素上时，--bg-color 的值会从 red 变为 blue，由于我们设置了 transition，背景颜色就会平滑地过渡过去，就像跳华尔兹一样优雅。

再来点高级玩法：让角度旋转起来

咱们再来一个更高级的例子，让一个元素旋转起来。这次咱们要用到角度类型 <angle>。

首先，注册一个自定义属性 --rotate-angle，指定它的类型为 <angle>，初始值为 0deg。

@property --rotate-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

然后，咱们给一个元素设置 transform 属性，使用 rotate() 函数，并将 --rotate-angle 作为旋转角度。

.spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
  transform: rotate(var(--rotate-angle));
  transition: --rotate-angle 2s linear infinite;
}

.spinner:hover {
  --rotate-angle: 360deg;
}

当鼠标悬停在 .spinner 元素上时，--rotate-angle 的值会从 0deg 变为 360deg，由于我们设置了 transition，元素就会旋转起来，而且是无限循环旋转，就像一个永不停歇的陀螺。

注意事项：兼容性问题

虽然 @property 很强大，但是它的兼容性还不是很好。目前，只有 Chrome 和 Edge 浏览器完全支持它。 Firefox 和 Safari 浏览器正在积极开发中，相信不久的将来也会支持。

在使用 @property 时，一定要注意兼容性问题。可以使用 @supports 媒体查询来检测浏览器是否支持 @property，如果不支持，则提供备选方案。

@supports (--css: registerProperty) {
  /* 使用 @property 的代码 */
}

@supports not (--css: registerProperty) {
  /* 提供备选方案的代码 */
}

总结一下：@property 的优势

扩展 CSS 动画能力： 可以对自定义属性进行动画，突破了 transition 和 animation 的类型限制。
更精细的控制： 可以明确地告诉浏览器自定义属性的类型和初始值，让动画效果更加可控。
提高代码可读性： 通过注册自定义属性，可以更清晰地表达设计的意图，提高代码的可读性和可维护性。

最后，来点幽默的结尾

@property 就像 CSS 世界里的魔法棒，让你的变量拥有了生命，可以在页面上尽情地跳舞。虽然它现在还比较年轻，兼容性还有待提高，但是它的潜力是无限的。相信在不久的将来，它会成为 CSS 开发中不可或缺的一部分，让我们的网页设计更加精彩纷呈。

所以，赶紧拿起你的魔法棒，开始探索 @property 的奇妙世界吧！别忘了，魔法虽好，可不要贪杯哦！要合理使用，避免过度动画，让你的用户感到头晕目眩。毕竟，咱们的目标是创造美好的用户体验，而不是把用户送进急诊室。

希望这篇文章能让你对 @property 有一个更深入的了解。如果你觉得有用，不妨点个赞，分享给你的小伙伴们。让我们一起学习，一起进步，一起创造更美好的 Web 世界！

CSS `@property`：注册自定义属性，让变量也能动起来！

CSS `@property`：给你的变量加点戏，让它们舞起来！

发表回复取消回复

CSS @property：给你的变量加点戏，让它们舞起来！

发表回复 取消回复

CSS `@property`：给你的变量加点戏，让它们舞起来！

发表回复取消回复