js实现一个卡片折叠三维式跑步运动柱状图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：js实现一个卡片折叠三维式跑步运动柱状图表效果代码，点击更多按钮显示图表

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          margin: 0;
          perspective: 750px;
          height: 100vh;
          width: 100vw;
        }
        
        article {
          --color: #fff;
          --border: #0008;
          --angle: 0deg;
          background: linear-gradient(#fff 64.75%, #0000 0), url(//repo.bfw.wiki/bfwrepo/image/6185b13dde9a9.png) 50% 65%/200% 200%;
          border-radius: 0.75vmin;
          box-shadow: 0 8vmin 5vmin -5vmin #0005;
          font-family: Roboto, Helvetica, Arial, sans-serif;
          height: 70vmin;
          left: calc(50% - 25vmin);
          position: absolute;
          top: calc(50% - 35vmin);
          transform: rotate3d(1, 0, 0, var(--angle));
          transform-origin: 50% 70%;
          transform-style: preserve-3d;
          transition: transform 0.5s, box-shadow 0.5s;
          width: 50vmin;
        }
        article *:focus {
          outline: 1px dashed;
          outline-offset: 2px;
        }
        article > div {
          background: url(//repo.bfw.wiki/bfwrepo/image/6185b13dde9a9.png) 50% 65%/200% 200%;
          border-radius: 0.75vmin;
          box-sizing: border-box;
          clip-path: polygon(0 0, 100% 0%, 100% 65%, 0% 65%);
          height: 100%;
          left: 0;
          padding: 3vmin;
          position: absolute;
          top: 0;
          transform-origin: 50% 65%;
          transform: rotate3d(1, 0, 0, 0deg);
          transition: transform 0.5s;
          width: 100%;
        }
        article > div h1, article > div p {
          color: var(--color);
          font-size: 3.75vmin;
          letter-spacing: 0.5px;
          margin: 0;
          text-align: center;
          text-shadow: 1px 0 var(--border), 1px 1px var(--border), 0 1px var(--border), -1px 1px var(--border), -1px 0 var(--border), -1px -1px var(--border), 0 -1px var(--border), 1px -1px var(--border);
          text-transform: uppercase;
        }
        article > div p {
          margin-top: 1vmin;
          font-size: 2.75vmin;
        }
        article > ul {
          display: flex;
          height: 4vmin;
          justify-content: space-between;
          left: 50%;
          list-style: none;
          margin: 0;
          padding: 0;
          position: absolute;
          top: calc(92.5% - 4vmin);
          transform: translateX(-50%);
          transform-style: preserve-3d;
          width: 85%;
        }
        article > ul::after {
          background: linear-gradient(#8082, #0002);
          border-top: 1px dashed #f0f;
          bottom: 50%;
          content: "10,000 Steps";
          font-size: 1.25vmin;
          height: 0;
          left: -5%;
          opacity: 0;
          position: absolute;
          text-indent: -8vmin;
          transform: rotate3d(1, 0, 0, -90deg);
          transform-origin: bottom center;
          width: 110%;
        }
        article > ul li {
          --height: 0;
          --colorDeg: min(calc(90deg * var(--steps) / 10000), 90deg);
          background: hsl(var(--colorDeg), 48%, 50%);
          box-shadow: inset 0 0 0 2px #0005;
          color: var(--color);
          display: flex;
          font: bold 2.5vmin/4vmin Helvetica, Arial, sans-serif;
          height: 4vmin;
          justify-content: center;
          text-transform: uppercase;
          transform: translate3d(0, 0, var(--height));
          transform-style: preserve-3d;
          transition: transform 0.5s;
          width: 4vmin;
        }
        article > ul li:focus::after, article > ul li:hover::after {
          background: #ffd;
          bottom: calc(4vmin + 4px);
          clip-path: polygon(0 0, 100% 0, 100% 80%, 60% 80%, 50% 95%, 40% 80%, 0 80%);
          color: black;
          content: counter(numSteps);
          counter-reset: numSteps var(--steps);
          display: block;
          font-size: 2vmin;
          height: 5vmin;
          line-height: 4vmin;
          padding: 0 1vmin;
          position: absolute;
        }
        article > ul li:nth-child(1) b::after {
          content: "S";
        }
        article > ul li:nth-child(2) b::after {
          content: "M";
        }
        article > ul li:nth-child(3) b::after {
          content: "T";
        }
        article > ul li:nth-child(4) b::after {
          content: "W";
        }
        article > ul li:nth-child(5) b::after {
          content: "T";
        }
        article > ul li:nth-child(6) b::after {
          content: "F";
        }
        article > ul li:nth-child(7) b::after {
          content: "S";
        }
        article > ul li b {
          font-size: 0;
          transform-style: preserve-3d;
          position: absolute;
          left: 0;
          text-align: center;
        }
        article > ul li b:after {
          display: block;
          font-size: 2.5vmin;
          height: 100%;
          left: 0;
          line-height: 4vmin;
          position: absolute;
          text-shadow: 1px 0 var(--border), 1px 1px var(--border), 0 1px var(--border), -1px 1px var(--border), -1px 0 var(--border), -1px -1px var(--border), 0 -1px var(--border), 1px -1px var(--border);
          top: 0;
          transform-origin: center bottom;
          transition: transform 0.5s;
          width: 4vmin;
        }
        article > ul li b::before {
          background: #0004;
          bottom: 4vmin;
          content: "";
          display: block;
          filter: blur(0.5vmin);
          height: var(--height);
          left: 0;
          position: absolute;
          transform: translate3d(0, 0, calc(-1 * var(--height)));
          width: 4vmin;
        }
        article > ul li div {
          background: linear-gradient(hsl(var(--colorDeg), 48%, 40%), hsl(var(--colorDeg), 48%, 30%));
          box-shadow: inset 0 0 0 1px #0002;
          color: hsl(var(--colorDeg), 48%, 30%);
          font-size: 0;
          height: var(--height);
          left: 0;
          position: absolute;
          top: 100%;
          transform: rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, -90deg);
          transform-origin: top right;
          transform-style: preserve-3d;
          transition: transform 0.5s;
          width: 100%;
        }
        article > ul li div::before, article > ul li div::after {
          align-items: center;
          background: linear-gradient(hsl(var(--colorDeg), 48%, 65%), hsl(var(--colorDeg), 48%, 50%));
          box-shadow: inset 0 0 0 1px #0002;
          box-sizing: border-box;
          color: hsl(var(--color), 48%, 20%);
          content: counter(steps);
          counter-reset: steps var(--steps);
          display: flex;
          font-size: 1.5vmin;
          height: 100%;
          justify-content: flex-start;
          line-height: 4vmin;
          overflow: hidden;
          padding-top: 1vmin;
     .........完整代码请登录后点击上方下载按钮下载查看