Question

在CSS3中我是否可以这样做@key-frame - 语法的行为类似于加载栏。

当我按住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秒。如果要更改“加载时间”，则需要更改animation样式和元标记。

Answer 2

是的，在每个间隔后增加div的宽度会使其表现得像一个加载条。

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

2 个答案: