纯css绘制的饼状图效果代码-html代码-BFW代码库

纯css绘制的饼状图效果代码

代码语言：html

所属分类：图表

代码描述：纯css绘制的饼状图效果代码，没有用js代码，纯粹是div+css实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .graph {
          --firstValue: 10;
          --secondValue: 30;
          --firstColor: #f13c59;
          --secondColor: #6441b5;
          --thirdColor: #d379e3;
          position: relative;
          display: inline-block;
          width: 30vw;
          height: 30vw;
          margin: 8px;
          --calcSecValue: calc(var(--firstValue) + var(--secondValue));
          background-image: conic-gradient(
            var(--firstColor) calc(var(--firstValue) * 3.6deg),
            var(--secondColor) calc(var(--firstValue) * 3.6deg),
            var(--secondColor) calc(var(--calcSecValue) * 3.6deg),
            var(--thirdColor) calc(var(--calcSecValue) * 3.6deg)
          );
          aspect-ratio: 1;
          -webkit-clip-path: circle(50% at 50% 50%);
                  clip-path: circle(50% at 50% 50%);
        }
        .graph:hover div::after,
        .graph:hover div::before,
        .graph:hover::before {
          transform: translateY(0) scale(1);
        }
        .graph div::after,
        .graph div::before,
        .graph::before {
          --colorVar: var(--firstColor);
          position: absolute;
          counter-reset: variable var(--firstValue);
          content: counter(variable);
          background: black;
          font-family: sans-serif;
          box-shadow: 0 2px 8px #00000066;
          color: var(--colorVar);
          text-shadow: 0 0 8px var(--colorVar);
          top: 10%;
          lef.........完整代码请登录后点击上方下载按钮下载查看