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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看