动画 CSS 渐变边框
阅读评论
这个渐变边框的小技巧非常有用
.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 技巧。例如，视觉上动画化数字。