css实现闪烁渐变背景，@property自定义属性

自 2024 年 7 月起，此功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。

@property 是 CSS 中一个相对较新的功能，主要用于定义自定义属性（即 CSS 变量）的类型、继承性以及初始值。它允许开发者更好地控制和利用 CSS 自定义属性，尤其是在动画、过渡等动态场景中。

它也是Houdini API中的一种，Houdini 是一组底层 API，它们使开发人员可以直接访问 CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能。

1. @property语法

@property --property-name {
  syntax: "";
  inherits: true | false;
  initial-value: value;
}

--property-name：自定义属性的名称，以 -- 开头。
syntax：定义该属性的值类型。可以使用 CSS 类型标识符，如 、、 等，也可以使用更复杂的类型定义。
inherits：指定该属性是否会继承自父元素，true 表示会继承，false 表示不会继承。
initial-value：指定该属性的初始值。如果在使用时没有显式指定值，则会使用该初始值。

/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {
  syntax: "";
  inherits: false;
  initial-value: 100px;
}

/* 使用自定义属性 */
.box{
  width: var(--box-size);
  height: var(--box-size);
}

2. 案例1：闪烁渐变背景

<div class="card">div>

/* 自定义属性 */
/* 使用了@property规则，其中 syntax: "" 指定了这些属性应该存储颜色值。 */
/* 这些属性不会继承 (inherits: false) 并且有初始值 (initial-value)。 */
@property --card-bg {
  syntax: "";
  inherits: false;
  initial-value: #c0bae8;
}

@property --shine-1 {
  syntax: "";
  inherits: false;
  initial-value: #ffbbc0;
}

@property --shine-2 {
  syntax: "";
  inherits: false;
  initial-value: #c0aecb;
}

.card {
  margin: 12px;
  border-radius: 24px;
  width: 400px;
  height: 300px;
  padding: 2rem;
  /* 使用了两个 radial-gradient （径向渐变）来定义背景颜色 */
  background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2),
      transparent 100% 100%
    ),
    radial-gradient(
      farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%,
      var(--card-bg) 100%
    );

  /* 将两种渐变进行颜色混合 */
  background-blend-mode: color-burn;

  /* 为卡片的背景色设置了两个不同的动画效果 */
  /* alternate:两个动画都是线性且无限循环的，并在每次动画结束时反向播放 */
  animation: animate-color-1 8s infinite linear alternate,
    4s animate-color-2 1s infinite linear alternate;
}

@keyframes animate-color-1 {
  from {
    --shine-1: initial;
  }
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  from {
    --shine-2: initial;
  }
  to {
    --shine-2: hotpink;
  }
}

3. 案例2：尺寸变化动画

 <div class="box">div>

/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {
  syntax: "";
  inherits: false;
  initial-value: 100px;
}

/* 定义自定义属性 --box-rotation 作为数字类型 */
@property --box-rotation {
  syntax: "";
  inherits: false;
  initial-value: 0;
}

/* 定义动画效果 */
@keyframes resize-box {
  from {
    --box-size: 100px;
  }
  to {
    --box-size: 200px;
  }
}

@keyframes rotate-box {
  from {
    --box-rotation: 0;
  }
  to {
    --box-rotation: 360;
  }
}

/* 应用自定义属性及动画 */
.box {
  width: var(--box-size);
  height: var(--box-size);
  background-color: lightcoral;
  transform: rotate(var(--box-rotation) deg);
  animation: resize-box 5s infinite alternate, rotate-box 10s infinite linear;
  border-radius: 1rem;
  margin: 20px;
}

4. 浏览器是否支持@property

参考文档：
MDN:@property
The @property Rule
@property：新一代 CSS 变量现已支持通用浏览器