#头条创作挑战赛#

本文同步本人掘金平台的原创翻译：https://juejin.cn/post/7053763392590315557

nerror="javascript:errorimg.call(this);">

本文为译文「意译」

我们只使用一个div，仅采用css实现饼状图。【如上图】

HTMl 结构

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>复制代码

本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 来表示。

Pie 的基本设置

上面我们使用了 aspect-ratio: 1; 保证 div 是正方形，当然你也可以使用 height: var(--w) 达到效果。

#0000 Hex Color · Red (0%) · Green (0%) · Blue (0%).

为了使得仅是边框的区域被看到，我们使用 mask 属性去隐藏中间圆的部分。我们将使用 radial-gradient() 方法：

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))复制代码

我们的目标如下图：

nerror="javascript:errorimg.call(this);">

如何添加圆形边缘呢，看了下面插图，你就明白这个小技巧。

nerror="javascript:errorimg.call(this);">

针对图上的效果(2)，是将圆形放在结束的边缘。

.pipe: after {  content: "";  position: absolute;  border-radius: 50%;  inset: calc(50% - var(--b)/2); // 知识点1  background: var(--c);  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); // 知识点2}复制代码

这里我们有：

left = right = 50% - b/2复制代码

知识点2： 的旋转度数计算 --

angle = percentage * 360deg / 100复制代码

到现在为止，我们实现的是一个静止的饼状图。我们接下来为它加上动效。

接着，我们创建关键帧：

@keyframes p {  from {    --p: 0  }}复制代码

最后，我们调用动画。

animation: p 1s .5s both;复制代码

效果图：

nerror="javascript:errorimg.call(this);">

后话

遗憾的是，上面所用到的技术现存的浏览器不是很广泛地支持，你可以在Can I Use查找属性是否被相关版本浏览器支持。请你在谷歌内核的浏览器上面去尝试博文展示的效果。

【完】

顶一下()     踩一下()