且看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demot</title>
</head>
<body>
<div class="demoBox"></div>
</body>
<style>
:root {
--height: 100px;
}
@property --width {
syntax: "<length>";
inherits: false;
initial-value: 100px;
}
.demoBox {
width: var(--width);
height: var(--height);
background-image: linear-gradient(45deg, red, blue);
animation: run 2s infinite alternate;
transition: all 1s;
}
@keyframes run {
from {
--width: 100px;
--height: 100px;
}
to {
--width: 200px;
--height: 200px;
}
}
</style>
</html>
在上面的代码中，通过自定义属性的--width能够在100px到200px中实现过渡效果；自定义变量--height只能在100px与200px中进行切换，如下所示
