【CSS】houdini自定义CSS属性实现渐变色旋转动画

田本初2024-10-15 23:22

现有一段代码，在不旋转整个元素的前提下，渐变背景无法应用动画

html 复制代码

<!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、该属性不可被继承。

css 复制代码

@property --direc {
  syntax: '<angle>'; 
  initial-value: 0deg;
  inherits: false;
}

html 复制代码

<!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>