javascript - @key-frames 表现得像一个加载栏

Question

在 CSS3 中有没有我可以这样做的 @key-frame-syntax 表现得像一个加载栏。

我希望它在我按住 div 时执行，绿色进度条从 0% 变为 100% 并重定向到另一个页面。 ？

演示 here !

Answer 1

您可以执行以下操作:

div {
  border-left:300px solid green;
  border-right:0px solid red;
  animation:loading 10s linear; /*add vendor prefixes here*/
}
@-webkit-keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}
@keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}

然后使用元刷新标签重新加载页面:

<meta http-equiv="refresh" content="10; url=http://example.com/">

demo

我在这里将加载时间设置为 10 秒。如果您想更改“加载时间”，您需要更改动画 样式和元标记。