[分享]css3半弧形拉动进度条

CSS3 半弧形拉动进度条是一种非常有趣的进度条设计，可以非常生动地展示进度情况。在这种设计中，我们将使用 CSS3 的 transform 和 transition 属性，不需要任何 JavaScr...

CSS3 半弧形拉动进度条是一种非常有趣的进度条设计，可以非常生动地展示进度情况。在这种设计中，我们将使用 CSS3 的 transform 和 transition 属性，不需要任何 JavaScript，并且在兼容性上也比较优秀。

.progress-bar {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ddd;
  border-radius: 100px 100px 0 0;
  overflow: hidden;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  transform: scaleY(0.9);
  transition: transform 0.5s ease;
  background-color: #007aff;
}

.progress-bar:hover .progress {
  transform: scaleY(1);
} 

如上代码所示，我们首先定义了一个进度条的容器，使用了 border-radius 属性，将左右两侧的圆角设置为圆形，中间是矩形。然后定义了一个 .progress 的元素，表示进度条的进度部分，设置了它的 transform-origin 为图片的中心点，并将 scaleY 设置为 0.9，表示起始高度为底部往上 90%，然后定义了一个 .progress-bar:hover .progress 的选择器，表示当鼠标移入进度条的容器时，将 .progress 的 scaleY 改为 1，表示完整显示出进度。

使用这种半弧形拉动进度条，可以让用户更加直观地理解进度。同时，这种设计也更加美观，可以提高网站的用户体验。