无JS，一个DIV实现饼图百分比效果动画（无遮罩）

2023-12-16 20:05:46

前言

传统的饼图通常使用一个DIV和一个遮罩层来实现百分比显示。然而，我们今天将要介绍一种不用遮罩层的方法来实现饼图百分比效果动画。这种方法使用CSS的伪元素来实现遮罩层，因此它不仅更简单，而且也更易于使用。

实现原理

首先，我们需要创建一个DIV来作为饼图的容器。这个DIV的宽高应该与饼图的直径相等。然后，我们需要使用CSS来设置这个DIV的背景颜色和边框。

.pie-chart {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
}

接下来，我们需要使用CSS的伪元素来创建一个遮罩层。这个遮罩层应该覆盖饼图的一半。我们可以使用::before伪元素来实现这个遮罩层。

.pie-chart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #000;
}

最后，我们需要使用CSS的动画来实现饼图百分比效果动画。这个动画应该让遮罩层从0%旋转到100%。我们可以使用@keyframes规则来实现这个动画。

@keyframes rotate-pie-chart {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.pie-chart::before {
  animation: rotate-pie-chart 2s linear infinite;
}

示例代码

以下是如何使用一个DIV实现饼图百分比效果动画的示例代码：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .pie-chart {
      width: 200px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #000;
    }

    .pie-chart::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: #000;
    }

    @keyframes rotate-pie-chart {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .pie-chart::before {
      animation: rotate-pie-chart 2s linear infinite;
    }
  </style>
</head>
<body>
  <div class="pie-chart"></div>
</body>
</html>