现有一段代码，在不旋转整个元素的前提下，渐变背景无法应用动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
--direc: 0deg;
width: 300px;
height: 300px;
border-radius: 4px;
background-image: linear-gradient(var(--direc), #5aec5a, #3c673c, #3c67e3);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to {
--direc: 360deg
}
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
传统模式下，开发者无法干预图片绘制过程，使用 houdini API 自定义 CSS属性，如本例中自定义的属性 --direc，性质为角度、初始值为0、该属性不可被继承。
@property --direc {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@property --direc {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card {
--direc: 0deg;
width: 300px;
height: 300px;
border-radius: 4px;
background-image: linear-gradient(var(--direc), #5aec5a, #3c673c, #3c67e3);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to {
--direc: 360deg
}
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>