jquery+css实现饼状图切换图表效果代码-html代码-BFW代码库

jquery+css实现饼状图切换图表效果代码

代码语言：html

所属分类：图表

代码描述：jquery+css实现饼状图切换图表效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html, body {
      width: 100%; 
      height: 100%;
      margin: 0;
      padding: 1em;
      font-family: 'Proxima Nova', 'Helvetica', sans-serif;
      letter-spacing: 1px;
      background: #163C4A;
      background: linear-gradient(to bottom right, #316F81, #163C4A) !important;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    button {
      font-size: 18px;
      padding: .5em 1em;
      border-radius: 10px;
      background-color: transparent;
      color: #ffffff;
      transition: all .2s ease;
      
    }
    
    button.active {
      background-color: #F2AE1C;
      border-color: #F2AE1C;
    }
    
    button:hover {
      cursor: pointer;
    }
    
    @keyframes fillup {
      from { stroke-dasharray: 0 100; }
    }
    
    .pie__container--chart svg {
      width: 100%; 
      height: 100%;
      transform: rotate(-90deg);
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }
    
    .pie__container--chart circle {
      fill: rgba(255, 255, 255, 0.1);
      stroke: #F2AE1C;
      stroke-width: 32;
      stroke-dasharray: 0 100; 
      transition: stroke-dasharray .5s ease;
    }
    
    .pie__container--chart {
      margin-bottom: 2em;
    }
    
    .pie__container {
      position: relative;
    }
    
    .pie__container--percent {
      position:absolute;
      right:18%;
      top:22%;
      font-size: 32px;
      color: #ffffff;
      font-weight: 600;
      opacity: 0;
      transition: opacity 1s ease;
    }
    
    @keyframes animated {
      from {opacity: .25;}
      to {opacity: 1;}
    }
    
    .pie__container--percent.animated {
      animation: animated 1s ease;
    }
    </style>

</head>

<body.........完整代码请登录后点击上方下载按钮下载查看