CSS背景边框滚动效果

通过圆锥渐变设置背景，再控制背景旋转

  <div class="container">
    <a class="card-bg" href="#"></a>
    <a class="card" href="#"></a>
  </div>

// 自定义渐变角度属性
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

.card {
  animation: 2s gradient-angle infinite linear;
  border: 2px solid transparent;
  background-image: linear-gradient(#584827, #2d230f),
    conic-gradient(
      from var(--gradient-angle),
      #584827 0%,
      #c7a03c 37%,
      #f9de90 30%,
      #c7a03c 33%,
      #584827 40%,
      #584827 50%,
      #c7a03c 77%,
      #f9de90 80%,
      #c7a03c 83%,
      #584827 90%
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
.card-bg {
  animation: 2s gradient-angle infinite linear;
  border: 2px solid transparent;
  background-image: conic-gradient(
      from var(--gradient-angle),
      #584827 0%,
      #c7a03c 37%,
      #f9de90 30%,
      #c7a03c 33%,
      #584827 40%,
      #584827 50%,
      #c7a03c 77%,
      #f9de90 80%,
      #c7a03c 83%,
      #584827 90%
    );
  background-clip:  border-box;
  background-origin: border-box;
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 1turn;
  }
}

html,
body {
  background: #141819;
}

.container {
  display: flex;
  justify-content: center;
 
}
.card,.card-bg {
  display: grid;
  min-width: 200px;
  margin:20px;
  padding: 20px;
  color: currentColor;
  border-radius: 20px;
  aspect-ratio: 1/1;
}

@property

@property 是一个 CSS Houdini API，它允许开发人员定义自定义 CSS 属性。在你的例子中， --gradient-angle 可能是你想要定义的一个自定义渐变角度属性。通过使用 @property，你可以为这个属性指定类型、初始值等信息。
你可以尝试下面这样定义 --gradient-angle 自定义属性：

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

在这个示例中，我们定义了 --gradient-angle 的语法为（表示一个角度值），不继承父元素的值，并且初始值为 0deg。

在 CSS 中，@property 规则中的 syntax 值用于定义属性值的语法规则。以下是一些常见的 syntax 值：

：表示长度值，比如 px, em, rem 等。
：表示百分比值，比如 50%, 100% 等。
：表示颜色值，比如 red, #00ff00, rgba(255, 0, 0, 0.5) 等。
：表示角度值，比如 0deg, 90deg, 180deg 等。
：表示数字值，可以带小数点，比如 1, 2.5, -10.75 等。
：表示字符串值，需要用引号括起来，比如 "Hello", 'World' 等。
：表示 URL 值，比如 url('example.com/image.jpg').
：表示自定义标识符（identifier），通常用于自定义属性名称。

@property

评论 (0)