[分享]css3半圆形进度条动画

CSS3是一种用于美化网页样式以及实现动画效果的语言。其中，半圆形进度条动画是一项非常常见的效果。使用CSS3半圆形进度条动画，可以使网页看起来更加生动且有趣。 /定义进度条样式/ .progress...

CSS3是一种用于美化网页样式以及实现动画效果的语言。其中，半圆形进度条动画是一项非常常见的效果。使用CSS3半圆形进度条动画，可以使网页看起来更加生动且有趣。

 /*定义进度条样式*/
    .progress {
      width: 100px;
      height: 100px;
      position: relative;
      border-radius: 50%;
      background-color: #E5E5E5;
      line-height: 100px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    
    /*定义进度条的伪元素（半圆形）*/
    .progress::before {
      content: ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #FFA07A;
      transform-origin: center bottom;
      transform: rotate(-180deg);
    }
    
    /*定义进度条动画*/
    .progress.active::before {
      animation: progress 2s ease-out;
    }
    
    /*定义进度条动画的关键帧*/
    @keyframes progress {
      0% {
        transform: rotate(-180deg);
      }
      100% {
        transform: rotate(0deg);
      }
    } 

首先，我们需要定义进度条的基本样式，如大小、位置、背景颜色等。同时，我们还需要使用border-radius: 50%来实现圆形效果。

接下来，我们使用::before伪元素来绘制一个半圆形。通过设置transform-origin: center bottom;来让半圆形以底部为起始点旋转。此时，半圆形是在进度条上方的，后续我们会通过动画来推动半圆形至进度条底部。

最后，我们为进度条添加active类，触发动画效果。动画使用animation: progress 2s ease-out;来定义。关键帧中，我们将半圆形从-180deg（进度条顶部）旋转至0deg（进度条底部），完成一次动画。