react卡片式扇形进度条图表效果代码-html代码-BFW代码库

react卡片式扇形进度条图表效果代码

代码语言：html

所属分类：图表

代码描述：react卡片式扇形进度条图表效果代码

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

<!DOCTYPE html>
<html lang="zh-CN" >

<head>
  <meta charset="UTF-8">
  <title>财务健康度评分卡</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'>
  
<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --sat: 10%;
  --white: hsl(0, 0%, 100%);
  --gray50: hsl(var(--hue), var(--sat), 95%);
  --gray100: hsl(var(--hue), var(--sat), 90%);
  --gray200: hsl(var(--hue), var(--sat), 80%);
  --gray300: hsl(var(--hue), var(--sat), 70%);
  --gray400: hsl(var(--hue), var(--sat), 60%);
  --gray500: hsl(var(--hue), var(--sat), 50%);
  --gray600: hsl(var(--hue), var(--sat), 40%);
  --gray700: hsl(var(--hue), var(--sat), 30%);
  --gray750: hsl(var(--hue), var(--sat), 25%);
  --gray800: hsl(var(--hue), var(--sat), 20%);
  --gray900: hsl(var(--hue), var(--sat), 10%);
  --gray950: hsl(var(--hue), var(--sat), 5%);
  --danger100: hsl(3, 77%, 90%);
  --danger200: hsl(3, 77%, 80%);
  --danger500: hsl(3, 77%, 50%);
  --danger700: hsl(3, 77%, 30%);
  --danger800: hsl(3, 77%, 20%);
  --warning100: hsl(33, 94%, 90%);
  --warning200: hsl(33, 94%, 80%);
  --warning500: hsl(33, 94%, 50%);
  --warning600: hsl(33, 94%, 40%);
  --warning700: hsl(33, 94%, 30%);
  --warning800: hsl(33, 94%, 20%);
  --success100: hsl(153, 60%, 90%);
  --success200: hsl(153, 60%, 80%);
  --success300: hsl(153, 60%, 70%);
  --success500: hsl(153, 60%, 50%);
  --success700: hsl(153, 60%, 30%);
  --success800: hsl(153, 60%, 20%);
  --primary200: hsl(223, 90%, 80%);
  --primary500: hsl(223, 90%, 50%);
  --primary600: hsl(223, 90%, 40%);
  --trans-dur: 0.3s;
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  color-scheme: light dark;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

#root {
  width: 100%;
}

body,
button {
  color: light-dark(var(--gray900), var(--gray100));
  font: 1em/1.5 Inter, sans-serif;
}

body {
  background-color: light-dark(var(--gray50), var(--gray950));
  display: grid;
  place-items: center;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3em;
  margin: auto;
  padding: 1.5em 0;
  width: calc(100% - 3em);
}

.card {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 25em;
}
.card__surface {
  animation: fade-in 1s var(--ease-out);
  background: light-dark(var(--white), var(--gray900));
  border-radius: 1em;
  box-shadow: 0 0.25em 0.625em rgba(0, 0, 0, 0.05);
  min-width: 0;
  transition: background-color var(--trans-dur);
}
.card__header, .card__badge, .card__graph-container, .card__description, .card__score-button {
  animation: fade-slide-up 0.8s var(--ease-out) forwards.........完整代码请登录后点击上方下载按钮下载查看