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: 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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0