前言

Jym好😘，我是珑墨，今天给大家分享 【css】你需要自定义@property而不是 CSS 变量，嘎嘎的😍，看下面。

在 CSS 中，自定义属性和 CSS 变量通常可以互换使用，尽管它们是不同但相关的概念。本文通过2个示例演示了自定义属性比变量更适合的地方，同时展示了自定义属性为设计复杂、精细的动画提供的更大的自由度和灵活性。

我们通常使用CSS变量作为我们计划重用的某些值的占位符，以避免重复相同的值，并按需更新该值。--mix

:root { 
  --mix: color-mix(in srgb, #8A9B0F, #fff 25%);
}
div {
  box-shadow: 0 0 15px 25px var(--mix);
}

在 CSS 中使用注册自定义属性。你可能会发现最常见的示例演示了如何为渐变的颜色制作动画，否则我们无法做到这一点，因为 CSS 变量被识别为字符串，我们需要的是一种可以在两个数值之间插值的数字格式。在这里，我们不仅可以定义变量的值，还可以定义其语法、 初始值和继承。@property

下面我们开始2个例子的演示：

例1：css悬停背景动画

下面介绍我们如何注册一个自定义属性，该属性的格式设置为默认设置为的百分比值，并且不由子元素继承。--circleSize``10%

@property --circleSize {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}

div { /* red div */
  clip-path: circle(var(--circleSize) at center bottom);
  transition: --circleSize 300ms linear;
}

section:hover div { 
  --circleSize: 125%; 
}

在此示例中，一个circle()函数用于将元素剪辑成一个圆。半径的大小值设置为已注册的自定义属性，然后在悬停时使用独立更改，我们可以做到这一点，因为我们已经告诉 CSS 将自定义属性视为百分比值而不是字符串：<div> circle() --circleSize transition

定义和规范我们自己的 CSS 属性的自由为我们提供了新的动画超能力，这些超能力曾经只有 JavaScript 才能实现，比如过渡渐变的颜色。

例2：文字渐变垂直滚动

下面我们展示下如何制作一个垂直变色的文字滚动：👀

<div class="scrolling-text">
  <div class="text-container">
    <div class="text">
      <ruby>壹<rt>one</rt></ruby>
      <ruby>蜀<rt>two</rt></ruby>
      <ruby>兩<rt>three</rt></ruby>
    </div>
  </div>
</div>

这段包含我们将要制作动画的汉字。这些汉字标有<ruby>标签。它是组件的父容器，在其中，是一个子元素，其中包含滑动文本字符，允许字符滑入和滑出视图。.scrolling-text

垂直滑动

在CSS中，让我们让字符在悬停时垂直滑动。我们正在制作的是一个具有固定高度的容器，当角色溢出可用空间时，我们可以用来将角色剪掉。

.scrolling-text {
  height: 1lh;
  overflow: hidden;
  width: min-content;
}
.text-container:has(:hover, :focus) .text {
  transform: translateY(-2lh) ;
}
.text {
  transition: transform 2.4s ease-in-out;
}

将容器的宽度设置为.scrolling-textmin-content使字符紧密贴合，将它们垂直堆叠在一列中。容器的高度已设置。既然我们已经设置了1lhoverflow: hidden在容器上，在任何给定时间点，容器中仅显示一个字符。

提示：你还可以使用 HTML<pre>元素或white-space或text-wrap属性来控制文本换行方式。

悬停时，文本会向相反或向上的方向移动单个文本字符的高度，或加倍高度。因此，基本上，我们将内容向上滑动两个字符，以便在保存文本的容器处于悬停状态时从第一个字符到第三个字符进行动画处理。-2lh

将渐变应用于文本

这里有一个有趣的样式：

.text {
  background: repeating-linear-gradient(
    180deg, 
    rgb(224, 236, 236), 
    rgb(224, 236, 236) 5px, 
    rgb(92, 198, 162) 5px, 
    rgb(92, 198, 162) 6px);
  background-clip: text;
  color: transparent; /* to show the background underneath */
  background-size: 20% 20%;
}

你发现自己在工作中使用重复渐变的频率是多少？不过，有趣的部分是它之后的内容。看，我们正在文本上设置一种颜色，这样就可以通过它显示出来。但是，由于文本与CSS中的其他内容一样是一个框，因此我们在文本本身处剪裁背景，使其看起来像是从渐变中剪出的文本。transparent repeating-linear-gradient()

对渐变进行动画处理

在这里，我们将其他教程中介绍的相同动画渐变概念应用到我们在这里所做的工作中。为此，我们将首先将一些值注册为自定义属性。但与其他实现不同的是，我们的实现要复杂一些，因为我们将对多个值进行动画处理，而不是更新色调。repeating-linear-gradient()

取而代之的是，我们正在制作两种颜色的动画，一个长度和一个角度。

@property --c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(224, 236, 236);
}
@property --c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(92, 198, 162);
}
@property --l {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 5px;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

.text {
  background: repeating-linear-gradient(
    var(--angle), 
    var(--c1), 
    var(--c1) 5px, 
    var(--c2) var(--l), 
    var(--c2) 6px);
}

我们希望在保存文本的容器悬停或处于焦点状态时更新已注册的自定义属性的值。只需使用更新的值重新声明属性即可。

.text-container:has(:hover, :focus) .text {
  --c1: pink;
  --c2: transparent;  
  --l: 100%;
  --angle: 90deg;

  background-size: 50% 100%;
  transform:  translateY(-2lh);
}

为了更清楚地了解发生了什么，这些是悬停时更新的自定义属性和值:

--c1: 从颜色值开始，然后更新为.rgb(224, 236, 236)``pink
--c2: 从颜色值开始，然后更新为 .rgb(92, 198, 162)``transparent
--l：从长度值开始，并更新到。5px``100%
--a：以的角度值开头，并更新为。180deg``90deg

因此，渐变中使用的两种颜色会过渡到其他颜色，而渐变的整体大小会增加和旋转。就好像我们正在为渐变编排一个简短的舞蹈套路。

完善过渡

同时，包含字符的元素向上滑动以一次显示一个字符。唯一的问题是我们必须告诉CSS悬停时会有什么，我们直接在元素上执行：.text``transition``.text

.text {
  transition: --l, --angle, --c1, --c2, background-size, transform 2.4s ease-in-out;
  transition-duration: 2s; 
}

是的，我可以很容易地使用关键字来选择所有过渡属性。但我更喜欢采取额外的步骤，单独声明每一个。这是一个小习惯，可以防止浏览器不得不监视太多的东西，这可能会减慢速度，甚至会减慢速度。all

最终演示

我希望这个小练习不仅演示了我们可以用 CSS 自定义属性制作的各种奇特的东西，还有助于搞清自定义属性和标准变量之间的区别。

标准变量是更易于维护的代码以及[它们自己的一些花哨的技巧]的绝佳占位符，但是当你发现自己需要更新支持多个值的属性中的一个值（例如渐变中的颜色）时，at-rule 就是它所在的位置，因为它允许我们使用自定义规范来定义变量。@property。

今天就到这儿吧。😂

感谢jym浏览本文，共同进步🤞，若有更好的观点，欢迎评论区讨论哈🌹。

【CSS】你需要自定义@property而不是CSS变量

前言