css实现三维数字仪表盘进度条效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：css实现三维数字仪表盘进度条效果代码，结合dat.GUI可修改数据。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
*, *::before, *::after {
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  background-image: radial-gradient(circle, #000, #222 500px);
  color: #fff;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
}
body * {
  transform-style: preserve-3d;
}

.scene {
  -webkit-animation: rotate 16s infinite linear;
          animation: rotate 16s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg) rotateX(30deg) rotate(360deg);
  }
  to {
    transform: rotate(360deg) rotateX(30deg) rotate(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg) rotateX(30deg) rotate(360deg);
  }
  to {
    transform: rotate(360deg) rotateX(30deg) rotate(0deg);
  }
}

.dial {
  --value: 0.3;
  --size: 520;
  --divCount: 24;
  --spanCount: 12;
  --arc: 240deg;
  --divHeight: calc(var(--size) * 0.15);
  --hueStart: 0;
  --hueEnd: 120;
  --hue: calc((var(--hueEnd) - var(--hueStart)) * var(--value) + var(--hueStart));
  position: relative;
  width: calc(var(--size) * 1px);
  aspect-ratio: 1;
}
.dial div {
  --divWidth: calc(tan(var(--arc) / var(--divCount)) * var(--size) / 2);
  --divWidthInner: calc(tan(var(--arc) / var(--divCount)) * (var(--size) / 2 - var(--divHeight)));
  --divGap: calc((var(--divWidth) - var(--divWidthInner)) * 0.5px);
  --angle: calc(var(--arc) / var(--divCount) * (var(--i) + 0.5) - var(--arc) / 2);
  --r: calc((var(--size) - var(--divHeight)) * -0.5px);
  --light: calc(var(--i) / var(--divCount) * 50% + 25%);
  --color: hsl(var(--hue) 100% var(--light));
  position: absolute;
  left: calc(50% - var(--divWidth) * 0.5px);
  top: calc(50% - var(--divHeight) * 0.5px);
  width: calc(var(--divWidth) * 1px);
  height: calc(var(--divHeight) * 1px);
  transform: rotate(var(--angle)) translateY(var(--r));
}
.dial div i {
  position: absolute;
  inset: 0;
  background-color: #fff4;
  background-image: linear-gradient(0deg, #000a, 5%, transparent), linear-gradient(180deg, #000a, 5%, transparent), linear-gradient(to right, var(--color) calc(var(--value) * 100%), transparent 0);
  background-size: calc(var(--divWidth) * var(--divCount) * 1px) 100%;
  background-position-x: calc(var(--divWidth) * var(--i) * -1px);
}
.dial div i:nth-child(1) {
  transform: translateZ(calc(var(--divHeight) * 0.5px));
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--divGap)) 100%, var(--divGap) 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - var(--divGap)) 100%, var(--divGap) 100%);
}
.dial div i:nth-child(2) {
  transform: rotateX(90deg) translateZ(calc(var(--divHeight) * 0.5px));
}
.dial div i:nth-child(3) {
  transform: rotateX(180deg) translateZ(calc(var(--divHeight) * 0.5px));
  -webkit-clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--divGap)) 0, var(--divGap) 0);
          clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--divGap)) 0, var(--divGap) 0);
}
.dial div i:nth-child(4) {
  --scale: calc(var(--divWidthInner) / var(--divWidth));
  transform: rotateX(270deg) translateZ(calc(var(--divHeight) * 0.5px)) scaleX(var(--scale));
}
.dial span {
  --spanTranslate: calc((var(--divHeight) / (var(--spanCount) - 1) * var(--i) - (var(--divHeight) / 2)) * 1px);
  --light: calc(var(--i) / var(--divCount) * 50% + 15%);
  position: absolute;
  inset: 0;
  counter-reset: value var(--textValue);
  transform: translateZ(var(--spanTranslate));
  color: hsl(var(--hue), 100%, var(--light));
}
.dial span::after {
  content: counter(value);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--size) * 0.5px);
  font-weight: 700;
}
</style>


  
  
</head>

<body translate="no">

<div class="scene">
  <div class="dial">
    <div style="--i: 0"><i></i><i></i><i></i><i></i></div>
    <div style="--i: 1"><i></i><i></i&.........完整代码请登录后点击上方下载按钮下载查看