我正在使用 制作一个简单的进度条<progress>
,但是当我向其中添加动画时出现错误,它会持续很长时间并且不尊重width: 100px;
progress {
border: none;
border-radius: 2rem;
width: 100%;
height: 9px;
animation: prog 2s linear;
}
::-webkit-progress-bar-value {background-color: #1DA1F2; border-radius: 2rem;}
::-webkit-progress-value {background-color: #1DA1F2; border-radius: 2rem;}
::-moz-progress-bar {background-color: #1DA1F2; border-radius: 2rem;}
@keyframes prog {
0% {width: 0%; background-color: #f1f1f1;}
100% {width: 100% color: #000;}
}
<progress max="100" value="76"></progress>
我修改了代码以使其正常工作,现在它可以工作了......但下面的例子更好......
您好,问题是您正在更改标签的宽度
progress
,您需要做的是增加属性的值value
。您想要的是仅使用 CSS 来实现这样的效果
仅用于学术目的,虽然我知道这不是您需要的答案,但我注意到 给定一个未确定的进度元素(无值),伪元素的宽度可以动画
::-moz-progress-bar
,但 webkit 伪元素保留其初始样式并忽略到动画。进度条和进度值都不是。然而,话虽如此,这些伪元素确实支持转换。但是您可能知道,当元素经历状态更改(例如添加类)时,就会发生转换。(或类似 :hover 的伪类)。
以下适用于 Chrome 和 Firefox:
但我们回到最初的两个问题:
实际上,我认为没有办法用纯 CSS 来做到这一点。另一种方法是将Csharls告诉您的内容与一些 javascript 结合起来,根据条形的实际值的变化来更新“伪进度”,这将被隐藏。
编辑
不好意思……我编辑了代码片段来做一个实验,并踩了我之前做过的事情。现在我重置它。