CSS 圆环百分比

在网页设计中，圆环百分比是一种常见的元素，通常用于展示进度、比例或百分比。通过使用CSS技术，我们可以轻松地实现一个漂亮的圆环百分比效果，而无需依赖于图像或JavaScript。

实现原理

实现圆环百分比的关键在于两个部分：360度旋转的圆环背景和根据百分比显示的进度部分。我们可以通过CSS的border-radius属性、transform属性和animation属性来实现这一效果。

首先，我们会创建一个圆形的div元素作为圆环的背景，然后添加一个内部的div元素作为进度条。通过设置border-radius属性和border属性，我们可以让背景元素变成一个空心圆环。通过transform属性的rotate函数，我们可以控制进度条的旋转角度，从而实现动态的百分比效果。

实现步骤

步骤1：HTML结构

首先，我们需要创建一个包含背景和进度条的HTML结构。以下是一个简单的示例：

<div class="circle-progress">
  <div class="progress"></div>
</div>

在这个结构中，.circle-progress是圆环的背景元素，.progress是进度条元素。

步骤2：CSS样式

接下来，我们需要为这两个元素添加样式。以下是一个基本的样式设置：

.circle-progress {
  width: 200px;
  height: 200px;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  position: relative;
}

.progress {
  width: 100%;
  height: 100%;
  border: 10px solid #26a69a;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: fill 2s forwards;
}

@keyframes fill {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(calc(-90deg + (var(--percentage) * 3.6deg)));
  }
}

在这段CSS代码中，我们定义了圆环背景的样式和进度条的样式。border-radius: 50%用于将元素变成圆形，transform: rotate(-90deg)用于初始化进度条的位置。通过animation属性和@keyframes定义一个旋转动画，我们可以控制进度条的旋转效果。

步骤3：JavaScript动态设置百分比

为了能够动态地改变圆环的进度，我们可以通过JavaScript来设置.progress元素的--percentage变量，从而实现不同百分比的效果。以下是一个简单的示例：

const circle = document.querySelector('.progress');

function setPercentage(percentage) {
  circle.style.setProperty('--percentage', percentage);
}

// 设置百分比为50%
setPercentage(50);

通过调用setPercentage函数并传入不同的百分比值，我们可以实时地改变进度条的显示效果。

示例

下面是一个完整的示例代码，展示了一个基本的圆环百分比效果：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Circle Progress</title>
  <style>
    .circle-progress {
      width: 200px;
      height: 200px;
      border: 10px solid #f3f3f3;
      border-radius: 50%;
      position: relative;
    }

    .progress {
      width: 100%;
      height: 100%;
      border: 10px solid #26a69a;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(-90deg);
      transform-origin: center;
      animation: fill 2s forwards;
    }

    @keyframes fill {
      from {
        transform: rotate(-90deg);
      }
      to {
        transform: rotate(calc(-90deg + (var(--percentage) * 3.6deg)));
      }
    }
  </style>
</head>
<body>
  <div class="circle-progress">
    <div class="progress"></div>
  </div>

  <script>
    const circle = document.querySelector('.progress');

    function setPercentage(percentage) {
      circle.style.setProperty('--percentage', percentage);
    }

    // 设置百分比为75%
    setPercentage(75);
  </script>
</body>
</html>

在这个示例中，我们定义了一个圆环背景和一个进度条的结构，并通过JavaScript设置了进度条的百分比为75%。当页面加载时，进度条会展示一个75%的填充效果。