[分享]css3半圆进度条

随着 web 技术的不断发展，解决更多样的问题已经变得十分简单。其中一种情况是半圆形进度条。传统的矩形进度条已经满足了大多数要求，但某些情况下，半圆进度条会更好看，更为有效。CSS3 提供了创建半圆形...

随着 web 技术的不断发展，解决更多样的问题已经变得十分简单。其中一种情况是半圆形进度条。传统的矩形进度条已经满足了大多数要求，但某些情况下，半圆进度条会更好看，更为有效。

CSS3 提供了创建半圆形进度条的方法，通过在一个 div 元素中嵌入另一个 div，再通过 CSS3 的 transform 属性来实现旋转的效果，最后再通过 border-radius 属性来控制转动时的边缘。

 .half {
    position: relative;
    width: 100px;
    height: 50px;
    background: #ddd;
    border-radius: 999px;
    overflow: hidden;
  }
  
  .half .fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: blue;
    transform-origin: bottom center;
    transform: rotate(-45deg);
  } 

上述 CSS 中，我们创建了一个半圆形进度条的样式。首先，我们给指针的容器元素设置了高度和宽度，并添加了圆角，这样它就成了一个半圆形的形状。接着，我们给它添加了一个内部的 div 元素，并通过相对定位把它置于指针容器的顶部和左侧。

现在我们需要通过旋转这个内部 div 元素来实现进度条的旋转。这里我们使用了 CSS3 的 transform 属性。transform-origin 属性设置了旋转基点为底部中心。transform 属性则把元素旋转了 -45 度，使它正好位于半圆的左侧。最后，我们将内部 div 元素的高度设置为 200% 以确保它的高度可以覆盖整个半圆的面积。

这样，我们就创建了一个 CSS3 半圆形进度条。通过控制内部 div 元素的宽度，我们可以实现显示不同的进度。