如何制作地球进步派

Question

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

如何制作一个里面有图像的进度饼，并在它移动时用颜色显示里面的图像？

Answer 1

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

将灰度图像置于彩色图像下方。
使用 clip-path 仅显示彩色图像的一部分。
使用 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>

如何制作地球进步派

How to make earth progress pie

html

javascript

css

animation

progress-bar

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