现有一段代码，在不旋转整个元素的前提下，渐变背景无法应用动画
<!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>
