CSS 带背景图案的饼图

Question

我正在尝试用 PNG 图像作为背景图像制作饼图：

.piebg {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-image: url('https://pngimg.com/uploads/pizza/pizza_PNG44095.png');
  background-size: cover;
}

.pie {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: inherit;
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #fff;
  transform-origin: left;
  animation: spin 5s linear infinite, bg 5s step-end 1;
}

.pie::after {
  content: '';
  display: block;
  height: 100%;
  right: 50px;
  border-radius: 100% 0 0 100% / 50%;
  background-color: #fff;
  position: relative;
  top: -102px;
}

@keyframes spin {
  to {
    transform: rotate(.5turn);
  }
}

@keyframes bg {
  50% {
    background: transparent;
  }
}

<div class="piebg">
  <div class="pie"></div>
</div>

饼图区域填充错误存在问题。 CSS 动画不是我完成此示例的经验的强项。

你能帮我找一篇如何完成我的饼图的文章或例子吗？

Answer 1

如果你考虑不连续的动画，我们可以只用一个div和mask。

.pie {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-image: url('https://i.stack.imgur.com/tJMg9.png');
  background-size: cover;
  --s: 0%;
  --mask: conic-gradient(#000 var(--s), transparent var(--s) 360%);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  animation: pie 2s forwards;
  /*                   ↑ you can use "infinite" instead */
}

@keyframes pie {
  10% {
    --s: 10%;
  }
  20% {
    --s: 20%;
  }
  30% {
    --s: 30%;
  }
  40% {
    --s: 40%;
  }
  50% {
    --s: 50%;
  }
  60% {
    --s: 60%;
  }
  70% {
    --s: 70%;
  }
  80% {
    --s: 80%;
  }
  90% {
    --s: 90%;
  }
  100% {
    --s: none;
  }
}

<div class="pie"></div>

另外现在我们可以用@property

制作一个连续的动画

@property --s {
  initial-value: 0%;
  inherits: false;
  syntax: '<percentage>';
}

.pie {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-image: url('https://i.stack.imgur.com/tJMg9.png');
  background-size: cover;
  --s: 0%;
  --mask: conic-gradient(#000 var(--s), transparent var(--s) 360%);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  animation: pie 2s 1s infinite;
}

@keyframes pie {
  100% {
    --s: 100%;
  }
}

<div class="pie"></div>

CSS 带背景图案的饼图

CSS pie chart with background pattern

css

css-animations

pie-chart