自 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;
}
4. 浏览器是否支持@property
参考文档:
🔍MDN:@property
🔍The @property Rule
🔍@property:新一代 CSS 变量现已支持通用浏览器