CSS 渐变边框动画 | CSS-Tricks

这个渐变边框的小技巧非常实用

.border-gradient {
  border: 5px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

这里有一些基本的演示，来自我们关于该主题的文章。Sephanie Eckles 在分享这个想法，并提供了更多细节。Bramus Van Damme 看到后，通过添加 *然后动画化* 渐变的角度，对其进行了扩展。就像

div {
  --angle: 0deg;
  /* … */
  border-image: linear-gradient(var(--angle), green, yellow) 1;
  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

但是等等！实际上，它并不会按原样动画化。浏览器不知道 360deg 是一个实际的角度值，而不仅仅是一个随机字符串。如果它 *确实* 知道这是一个角度值，它 *就可以* 对其进行动画化。所以，告诉它

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

查看 Bramus 的文章以获取那里的演示。货真价实的 CSS 技巧。我迫不及待地想看到 @property 获得更多支持（在我撰写本文时，仅限 Chrome 支持），因为它确实解锁了一些很酷的 CSS 技巧。例如，可视化数字动画。

直接链接 →