图解CSS3制作圆环形进度条的实例教程

前言

圆环形进度条是 Web 开发中非常常见的一种元素，它可以用来展示某个任务的完成百分比或者加载进度等信息。本教程将演示如何使用 CSS3 制作一个简单的圆环形进度条。

准备工作

首先我们需要准备一个 HTML 页面，并且引入 CSS 样式文件。

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="progress-ring">
      <div class="progress-label">
        <span class="progress-value">0%</span>
      </div>
    </div>
  </body>
</html>

其中，.progress-ring 类表示整个进度条元素，.progress-label 类表示进度条内的百分比文字，.progress-value 类表示百分比数值。我们需要使用 CSS 样式来控制这些元素的样式。

初试进度条

首先，我们可以先创建一个简单的圆环，用来表示进度条的整体样式。这可以通过 CSS 边框和圆角实现。

.progress-ring {
  width: 150px;
  height: 150px;
  border: 10px solid #d3d3d3;
  border-radius: 50%;
}

以上代码将生成一个宽 150px、高 150px、边框为 10px 的圆环。

实现进度条内部百分比

为了在进度条内显示百分比，我们需要将一个 div 盒子插入到 .progress-ring 中。

<div class="progress-ring">
  <div class="progress-label">
    <span class="progress-value">0%</span>
  </div>
</div>

并使用 CSS 控制其样式。

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.progress-value {
  font-size: 24px;
  font-weight: bold;
}

此时我们将百分比置于进度条的中心位置，同时调整其字体大小和加粗程度。

实现圆环形进度条

本教程的核心是如何创建一个圆环形进度条。这可以通过渐变 linear-gradient 实现。

background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 50%, #d3d3d3 50%, #d3d3d3 100%);

以上代码表示一个从 -90 度开始渐变的 conic-gradient 渐变背景，将由 #4caf50 到 #d3d3d3 变化。其中，50% 的位置为进度条完成位置。

为了控制进度条的进度，我们还需要使用 CSS 的 animation 属性。

animation: progress 5s ease-in-out forwards;

以上代码表示在 5 秒内，循环播放名为“progress”的动画，动画的时间函数为 ease-in-out。我们需要在后面继续定义“progress”动画。

@keyframes progress {
  0% {
    background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 0%, #d3d3d3 0%, #d3d3d3 100%);
  }
  100% {
    background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 100%, #d3d3d3 100%, #d3d3d3 100%);
  }
}

以上代码表示在动画开始时，进度条的颜色为 #4caf50，完成度为 0%，在动画结束时，进度条的颜色为 #4caf50，完成度为 100%。我们可以通过调整动画时间参数来控制进度条完成的速度。

完整代码

最终的代码如下：

<html>
  <head>
    <title>图解CSS3制作圆环形进度条的实例教程</title>
    <style>
      .progress-ring {
        position: relative;
        display: inline-block;
        width: 150px;
        height: 150px;
        margin: 1em;
        background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 50%, #d3d3d3 50%, #d3d3d3 100%);
        border-radius: 50%;
        animation: progress 5s ease-in-out forwards;
      }
      .progress-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .progress-value {
        font-size: 24px;
        font-weight: bold;
      }
      @keyframes progress {
        0% {
          background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 0%, #d3d3d3 0%, #d3d3d3 100%);
        }
        100% {
          background-image: conic-gradient(from -90deg, #4caf50 0%, #4caf50 100%, #d3d3d3 100%, #d3d3d3 100%);
        }
      }
    </style>
  </head>
  <body>
    <div class="progress-ring">
      <div class="progress-label">
        <span class="progress-value">0%</span>
      </div>
    </div>
  </body>
</html>

结语

以上就是图解 CSS3 制作圆环形进度条的完整攻略，希望对你有所帮助。通过改变上述代码的参数，你也可以制作出符合自己需求的进度条。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：图解CSS3制作圆环形进度条的实例教程 - Python技术站

图解CSS3制作圆环形进度条的实例教程

图解CSS3制作圆环形进度条的实例教程

前言

准备工作

初试进度条

实现进度条内部百分比

实现圆环形进度条

完整代码

结语

相关文章