怎么使用纯CSS实现饼状图

这篇文章主要介绍“怎么使用纯CSS实现饼状图”，在日常操作中，相信很多人在怎么使用纯CSS实现饼状图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用纯CSS实现饼状图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！本文为译文「意译」完整的代码请滑到文末。我们只使用一个div，仅采用css实现饼状图。
我们添加了几个 css 的变量：--p：进度条的百分比（纯数字，不带%），饼状图值和 div 内容（带%）一致。--b：边框厚度的值--c：边框的主体颜色本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 来表示。我们为饼状图设定基本的样式。上面我们使用了 aspect-ratio: 1; 保证 div 是正方形，当然你也可以使用 height: var(--w) 达到效果。接下来，我们使用伪元素实现简单的饼状图：知识点1: inset: 0; 相当于 top: 0; right: 0; bottom: 0; top: 0;知识点2: conic-gradient 圆锥渐变，css 方法, 更多内容， 这里的 #0000 是 transparent 的十六进制。#0000 Hex Color Red (0%) Green (0%) Blue (0%).conic-gradient应用之后：为了使得仅是边框的区域被看到，我们使用 mask 属性去隐藏中间圆的部分。我们将使用 radial-gradient() 方法：上面代码应用后，可得到效果图如下：我们的目标如下图：我们更改下代码即可实现：如何添加圆形边缘呢，看了下面插图，你就明白这个小技巧。针对图上的效果(1)，是将圆形放在开始的边缘。针对图上的效果(2)，是将圆形放在结束的边缘。知识点1： 的 inset: 0; 上面我们也提到 — 它是 left: 0; right: 0; bottom: 0; top: 0; 的简写。这里我们有：这里我们将元素往左和右移动了50% - b/2，也就等于元素宽度为 b, 且左右居中。针对高度，同理。知识点2： 的旋转度数计算 –先将元素旋转了相应的度数，之后对其位置进行移动，这里涉及到了对 Y 轴居中。看文字也许有些难懂，结合下面的插图理解下：到现在为止，我们实现的是一个静止的饼状图。我们接下来为它加上动效。先注册变量：接着，我们创建关键帧：注意：这里我们只需要设置 from 的 --p 值即可。浏览器会自动匹配我们预设 to 中的值（di免费云主机、域名v class="pie" style="--p:60;">60%

相关推荐: jquery中关键字let指的是什么

这篇文章主要介绍“jquery中关键字let指的是什么”，在日常操作中，相信很多人在jquery中关键字let指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery中关键字let指的是什么”的疑惑有所帮助！接下来，…