[分享]css做圆形数据图

在网页设计中，展示数据是必不可少的，而圆形数据图是一种更为直观的展示方式，可以更好地吸引用户的注意力。本文将介绍如何使用CSS来制作一个简单的圆形数据图。.circle { width: 200px;...

在网页设计中，展示数据是必不可少的，而圆形数据图是一种更为直观的展示方式，可以更好地吸引用户的注意力。本文将介绍如何使用CSS来制作一个简单的圆形数据图。

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}

.circle .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
  background-color: #ffa500;
  transform-origin: center center;
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

.circle .text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 30px;
  color: #888;
  transform: translate(-50%, -50%);
} 

首先，我们为圆形数据图添加一个类名“circle”，并设置它的宽度、高度和边框半径为50%，这样就可以让它呈现出圆形。接着，我们使用position:relative属性来设置图形位置，并添加一个名为“progress”的子元素，使用position:absolute属性设置该元素为绝对定位，left和top属性均为0，宽高都为100%。接着，使用clip属性将该元素裁剪成一个与第一步设置的圆形大小相同的圆形。我们为该元素添加背景颜色，并设置border-radius属性为50%，使其呈现出圆形。使用transform-origin属性将旋转点设置为圆心，接着使用动画属性animation实现圆形数据图填充的效果，为了让圆形从12点钟方向开始填充，我们需要先将旋转角度设置为-90度。最终效果是：五秒钟内，从0度到270度的圆弧被填充上，形成了一张完整的圆形数据图。

最后，我们添加一个文本框，用于显示填充比例。我们为文本框添加绝对定位，left和top的值为50%，即文本框的中心点与圆心重合，因为文本框的宽度与高度不确定，所以我们使用transform属性将文本框居中对齐。我们设置文本框的font-size属性和颜色，将填充比例显示到文本框内。