css实现立体透视柱状图图表动画效果代码-html代码-BFW代码库

css实现立体透视柱状图图表动画效果代码

代码语言：html

所属分类：图表

代码描述：css实现立体透视柱状图图表动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
       body {
	margin:0;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(lightblue,skyblue);
}
.wall {
	width:60em;
	height:40em;
	font-size:10px;
	border:1em solid rgba(255,255,255,0.5);
	border-radius:2em;
	color:white;
	font-family:sans-serif;
	display:grid;
	grid-template-columns:0 4fr 1fr;
	overflow:hidden;
}
h1 {
	position:relative;
	width:20em;
	margin:1em;
}
.back,.side {
	display:flex;
	align-items:center;
}
.back {
	background:linear-gradient(to right,#555,#ddd);
	justify-content:flex-end;
}
.side {
	background:radial-gradient(            at left,rgba(0,0,0,0.2) 25%,rgba(0,0,0,0) 90%        ),linear-gradient(to right,#ddd,#ccc);
	perspective:1000px;
}
ul {
	list-style-type:none;
	padding:0;
	--max-price:1449;
	display:flex;
	flex-direction:column;
}
.back ul {
	width:75%;
	align-items:flex-end;
}
.side ul {
	width:100%;
	transform-origin:left;
	transform:rotateY(-75deg) scaleX(4);
}
ul li {
	height:5em;
	background:var(--c);
	animation:show 1s linear forwards;
	transform-origin:right;
	transform:scaleX(0);
}
@keyframes show {
	to {
	transform:scaleX(1);
}
}ul li.xs-max {
	--c:tomato;
	--high-price:1449;
	--low-price:1099;
	--c2:orangered;
	z-index:5;
}
ul li.xs {
	--c:coral;
	--high-price:1349;
	--low-price:999;
	--c2:tomato;
	z-index:4;
}
ul li.xr {
	--c:lightsalmon;
	--high-price:899;
	--low-price:749;
	--c2:coral;
	z-index:3;
}
ul li.x {
	--c:deepskyblue;
	--high-price:1149;
	--low-price:999;
	--c2:dodgerblue;
	z-index:2;
}
.back ul li {
	width:calc(var.........完整代码请登录后点击上方下载按钮下载查看