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