div+css实现立体圆柱体进度条动画效果代码-html代码-BFW代码库

div+css实现立体圆柱体进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：div+css实现立体圆柱体进度条动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
@property --val {
  syntax: "<integer>";
  inherits: false;
  initial-value: 52;
}
.cylinder {
  transform-style: preserve-3d;
  font-size: 0.8em;
  --bar-length: 5em;
  --bar-width: 2em;
  --bar-height: 10em;
  --bar-color: var(--fill-clr);
  --bar-sides-color: #EBEBE325;
  position: relative;
  width: fit-content;
}

.cylinder .top,
.cylinder .mid,
.cylinder .bottom {
  transform-style: preserve-3d;
  width: var(--bar-width);
  height: var(--bar-length);
  border-radius: var(--bar-width)/var(--bar-length);
  transition: 500ms ease;
}

.cylinder .mid {
  width: calc(var(--bar-width) + var(--bar-height));
  background: var(--bar-sides-color);
  transition-property: width;
  transition-duration: 500ms;
}

.cylinder .bottom {
  background: var(--bar-color);
  position: absolute;
  top: 0;
  width: calc(var(--bar-width) + calc(var(--val) / var(--max) * var(--bar-height)));
}
.cylinder .bottom:before {
  transform-style: preserve-3d;
  position: absolute;
  content: "";
  border-radius: inherit;
  width: var(--bar-width);
  height: 100%;
  top: 0;
  right: 0;
  box-shadow: inset 0 0 calc(var(--bar-width) * .3) #0005;
}

.cylinder .bottom,
.cylinder .top:before {
  animation: ani-val 10s infinite both alternate;
}

.cylinder:nth-of-type(2) .bottom,
.cylinder:nth-of-type(2) .top:before {
  animation-delay: -2s;
}

.cylinder:nth-of-type(3) .bottom,
.cylinder:nth-of-type(3) .top:before {
  animation-delay: -5s;
}

.cylinder .top {
  position: absolute;
  background: var(--bar-sides-color);
.........完整代码请登录后点击上方下载按钮下载查看