使用CSS3和SVG创建圆形进度条动画效果

wufei123 2025-01-26 阅读:58 评论:0

可以使用 CSS3 和 SVG 创建圆形进度条动画效果，步骤如下：创建 SVG 元素并定义圆形路径；为圆形路径设置虚线样式；使用 CSS3 动画控制虚线的偏移量；通过调整虚线的初始偏移量设置进度百分比。使用 CSS3 和 SVG 创建圆...

可以使用 CSS3 和 SVG 创建圆形进度条动画效果，步骤如下：创建 SVG 元素并定义圆形路径；为圆形路径设置虚线样式；使用 CSS3 动画控制虚线的偏移量；通过调整虚线的初始偏移量设置进度百分比。

使用 CSS3 和 SVG 创建圆形进度条动画效果

圆形进度条动画效果是一种简洁而有效的方法，可显示任务的进展或完成百分比。使用 CSS3 和 SVG 可以轻松创建这种效果。

步骤：

1. 创建 SVG 元素

创建一个 SVG 元素，它将包含进度条。在 SVG 元素中，定义一个圆形路径，其半径为进度条所需的半径。

PHP

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke-width="10" fill="none" />
</svg>

2. 设置圆形的虚线样式

为圆形路径设置虚线样式，虚线间隔应为圆周的总长度。通过使用 stroke-dasharray 和 stroke-dashoffset 属性来实现。

PHP

circle {
  stroke-dasharray: 251.32741228718345;
  stroke-dashoffset: 251.32741228718345;
}

3. 使用 CSS3 动画

使用 CSS3 动画来控制圆形虚线的偏移量。动画的 duration 应设置为进度完成所需的时间，animation-fill-mode 应设置为 forwards，以使进度在动画完成后保持不变。

PHP

@keyframes progress {
  to {
    stroke-dashoffset: 0;
  }
}

circle {
  animation: progress 5s forwards;
}

4. 设置进度百分比

通过调整 stroke-dashoffset 的初始值来设置进度百分比。百分比等于 (1 - 进度百分比) * 圆周的总长度。

PHP

circle {
  stroke-dashoffset: calc((1 - 0.5) * 251.32741228718345);
}

示例代码：

PHP

<!DOCTYPE html>
<html>
<head>
  <style>
    svg {
      width: 100;
      height: 100;
    }

    circle {
      stroke-width: 10;
      fill: none;
      stroke-dasharray: 251.32741228718345;
      stroke-dashoffset: 251.32741228718345;
      animation: progress 5s forwards;
    }

    @keyframes progress {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</head>
<body>
  <svg>
    <circle cx="50" cy="50" r="40" />
  </svg>
</body>
</html>