CSS 饼状计时器 再再回顾

Kitty 反思 了 CSS-Tricks 上一篇古老的博文，讲述如何制作动画饼状计时器。 旧技术 仍然很巧妙。 新技术 同样巧妙，而且更简单。我特别喜欢 steps() 动画函数，它通过将伪元素旋转半圈来“翻转”从一侧到另一侧的“遮罩”。这真是太棒的 CSS 技巧了。

---

请允许我提前一两年发布“CSS 饼状计时器再再回顾”文章，以便抢先一步。这已经不再是技巧了，我们只需要使用 conic-gradient() 并 动画 百分比值作为自定义属性 从 0% 到 100%。

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

.chart {
  background: conic-gradient(red var(--percentage), white 0);
  animation: timer 4s infinite linear;
}

@keyframes timer {
  to {
    --percentage: 100%;
  }
}

目前这在 Chrome 中应该有效（但其他浏览器则不行）。