如何制作地球进步派[关闭]

Question

我想在我的网站上添加一个采用这种设计的进度条：

The progress pie

我如何制作一个包含图像的进度饼，并在它移动时以颜色显示其中的图像？

Answer 1

这很重要，但可以通过使用两个图像来实现，clip-path 和一个脚本，一个灰度图像和一个彩色图像。

1. 将灰度图像置于彩色图像下方。
2. 使用clip-path 仅显示彩色图像的一部分。
3. 使用 JavaScript 循环或使用 css 关键帧动画调整剪辑路径值

这是一个简化的关键帧示例：

.greyscale {
  filter: grayscale(1);
}

.color {
  overflow: hidden;
  animation: clippy 2s infinite;
}

@keyframes clippy {
  0%    { clip-path: polygon(50% 50%, 50% 0,  50% 0,  50%    0,  50%    0,  50%    0,  50%    0); }
  12.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100%    0, 100%    0, 100%    0, 100%    0); }
  25%   { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100%  50%, 100%  50%, 100%  50%); }
  37.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }  
  50%   { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%,  50% 100%,  50% 100%,  50% 100%); }
  62.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%,    0 100%,   0  100%,    0 100%); }  
  75%   { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%,    0 100%,   0   50%,    0  50%); }  
  87.5% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%,    0 100%,   0     0,    0    0); }
  100%  { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%,    0 100%,   0     0,  50%    0); }
}

div {
  border-radius: 50%;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 200px;  
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
}

<div>
  <img class="greyscale" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
  <img class="color" src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg">
</div>