Html 使用CSS设置进度条动画

所以，我在这页上有几个不同的进度条-

以下是我的HTML和CSS：

<div class="meter"><span style="width: 100%;"></span></div>


.meter { 
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

.meter{
高度：5px；
位置：相对位置；
背景：#f3efe6；
z指数：0；
页边顶部：-5px；
溢出：隐藏；
}
.米>跨度{
z指数：50；
显示：块；
身高：100%；
背景色：#e4c465；
位置：相对位置；
溢出：隐藏；
}

---

我只想简单地设置进度条的动画，使其从0%缓慢上升到它所处的任何百分比，而不是仅仅出现在那里，但我希望以尽可能简单的方式进行。我的最佳选择是什么？我目前使用的代码是否可能

我能想到的内联设置宽度动画的唯一方法是添加另一个

span

，因此HTML最终为：

<div class="meter">
    <span style="width:80%;"><span class="progress"></span></span>
</div>

---

你可以在行动中看到这一点。不支持CSS动画的浏览器只会使进度条处于最终状态。

我开发了一个进度条，因此它现在非常轻巧整洁，而且您也有百分比值，当百分比从100%更改为7%时，我应用了CSS转换，只需单击

更改

按钮即可查看其工作原理。更改<代码>过渡：宽度3秒从3秒到任何适合您需要的速度较慢或更快的转换

函数更改（）{
var selectedValue=document.querySelector（“#进度值”）.value；
document.querySelector（“.progress bar striped>div”）.textContent=selectedValue+“%”；
document.querySelector（“.progress bar striped>div”）.style.width=selectedValue+“%”；
}

。进度条分条{
溢出：隐藏；
高度：20px；
边缘底部：20px；
背景色：#F5；
边界半径：4px；
-webkit盒阴影：插入0 1px2pRGBA（0,0,0,0.1）；
-moz盒阴影：插入0 1px2pRGBA（0,0,0,0.1）；
盒影：插入0 1px2pRGBA（0,0,0,0.1）；
}
.进度条条条带化>div{
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景尺寸：40px 40px；
浮动：左；
宽度：0%；
身高：100%；
字体大小：12px；
线高：20px；
颜色：#ffffff；
文本对齐：居中；
-webkit盒阴影：插入0-1px0RGBA（0,0,0,0.15）；
-moz盒阴影：插入0-1px0RGBA（0,0,0,0.15）；
盒影：插入0-1px0RGBA（0,0,0,0.15）；
-webkit过渡：宽度3s；
-moz过渡：宽度3s；
-o型过渡：宽度3s；
过渡：宽度3s；
动画：进度条2s线性无限；
背景色：#288ade；
}
.进度条带条纹p{
保证金：0；
}
@为进度条条纹设置关键帧{
0% {
背景位置：40px0；
}
100% {
背景位置：0；
}
}

100%

使用

动画

和

@关键帧

（例如，每10%持续10秒）并使用

：在
之后，您可以在其中绘制进度图标（如
或
•
）。很抱歉，您能给我一个HTML/CSS示例吗？我是个业余爱好者，只做我自己的事情。好吧，我已经弄明白了！非常感谢。谢谢，这正是我最后要做的。（：不用担心-这是一个非常好看的网站：）谢谢！非常感谢。（：这是更好的答案。接受的答案只有在宽度增加时才会设置进度条的动画。如果您遇到用户可以返回的情况，则需要设置两个方向的动画，这可以通过
过渡：宽度2s ease
和2 div轻松完成。
.meter { 
    height: 5px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    background-color: #e4c465;
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both; 
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}