[分享]css3实现酷炫进度条

CSS3实现酷炫进度条

.progress-bar{
  width: 100%;
  background-color: #e0e0de;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.progress-bar .progress{
  height: 15px;
  border-radius: 10px;
  background-color: #85c1ff;
  position: absolute;
  top: 0;
  left: 0;
  animation: progress 3s ease-in-out infinite alternate;
}
@keyframes progress{
  from{
    width: 0;
  }
  to{
    width: 100%;
  }
} 

实现效果：

解析：

1. 父容器使用了overflow:hidden将子元素溢出的部分隐藏。

2. 子元素定义了position:absolute，在父容器中相对定位。

3. 使用了动画@keyframes，通过改变width的值，实现了进度条填充的效果。

4. 操作animation属性可以调整进度条填充的速度。

以上是CSS3实现酷炫进度条的简单方法，更为复杂的效果可以结合JS实现。