css - CSS颜色动画border-top属性

Question

我有一个 4px 的蓝色边框顶部，我想创建一个简单的动画来指示正在加载的东西。

body.loading {
    border-top: 3px black solid;
}

我想要一个黑色/白色渐变并移动它以产生效果。我找到了一些鼠标悬停效果的例子，但在这种情况下，我希望动画只对 body.loading 类持续存在。

我找到了一个例子，但使用的是背景颜色而不是边框​​。（http://jsfiddle.net/aKhjk/1/）。谢谢你的指导。

标签： css

Answer 1

bordertest为类添加动画属性

 animation: loading 3s linear infinite;

下面动画的关键帧：

@keyframes loading {
from {left: 0%; width: 0;z-index:100;}
to {left: 0; width: 100%;}

}

演示