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

请添加图片描述

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

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

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

1. @property语法

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

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

/* 定义自定义属性 --box-size 作为长度类型 */
@property --box-size {syntax: "<length>";inherits: false;initial-value: 100px;
}/* 使用自定义属性 */
.box{width: var(--box-size);height: var(--box-size);
}

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

请添加图片描述

<div class="card"></div>

/* 自定义属性 */
/* 使用了@property规则，其中 syntax: "<color>" 指定了这些属性应该存储颜色值。 */
/* 这些属性不会继承 (inherits: false) 并且有初始值 (initial-value)。 */
@property --card-bg {syntax: "<color>";inherits: false;initial-value: #c0bae8;
}@property --shine-1 {syntax: "<color>";inherits: false;initial-value: #ffbbc0;
}@property --shine-2 {syntax: "<color>";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: "<length>";inherits: false;initial-value: 100px;
}/* 定义自定义属性 --box-rotation 作为数字类型 */
@property --box-rotation {syntax: "<number>";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;
}