div+css实现新拟态统计图表代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：div+css实现新拟态统计图表代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F4F9;
  background: #ECEFF8;
}
body .main .graph-card {
  box-sizing: border-box;
  width: 889px;
  height: 412px;
  background: #ECEFF8;
  border: 2px solid rgba(252, 252, 252, 0.40218);
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.561517), 6px 6px 10px rgba(58, 62, 118, 0.086675), inset 2px 2px 4px 1px rgba(61, 53, 138, 0.086757);
  border-radius: 15px;
  padding: 50px 46px 33px 36px;
  display: flex;
}
body .main .graph-card .data-box {
  display: flex;
  flex-direction: column;
}
body .main .graph-card .data-box span {
  margin-bottom: 35px;
  font-family: Nunito;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height */
  text-align: right;
  color: #121323;
}
body .main .graph-card .data-box span:last-child {
  margin: 0;
}
body .main .graph-card .graph-box {
  position: relative;
}
body .main .graph-card .graph-box svg {
  margin-top: 8px;
  margin-left: 35px;
}
body .main .graph-card .graph-box .graph-bars {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding-left: 57px;
  padding-right: 51px;
  justify-content: space-between;
}
body .main .graph-card .graph-box .graph-bars .bar-chart {
  margin-bottom: 30px;
  box-sizing: border-box;
  padding: 2px;
  height: attr(data-color);
  width: 18px;
  background: #ECEFF8;
  border: 2px solid rgba(252, 252, 252, 0.40218);
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.561517), 6px 6px 10px rgba(41, 42, 56, 0.086675), inset 2px 2px 4px 1px rgba(61, 53, 138, 0.086757);
  border-radius: 5px 5px 0px 0px;
  height: calc(var(--data-percent) - 30px);
  display: flex;
  align-items: flex-end;
}
body .main .graph-card .graph-box .graph-bars .bar-chart .inside-box {
  width: 100%;
  height: var(--data-percent);
  background: blue;
  background: linear-gradient(180deg, #BBB2FF 0%, #7A90FD 100%);
  background-blend-mode: multiply;
  box-shadow: inset 3px -2px 4px #667EF2;
}
body .main .graph-card .graph-box .labels-box {
  box-sizing: border-box;
  width: 100%;
  margin-left: 35px;
  display: flex;
  justify-content: space-between;
  padding-right: 60px;
  margin-top: 11px;
}
body .main .graph-card .graph-box .labels-box label {
  font-family: Nunito;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height */
  text-align: center;
  color: #121323;
}
body .main .mini-cards {
  display: flex;
  margin-top: 30px;
}
body .main .mini-cards .mini-card {
  position: relative;
  margin-right: 30px;
  width: 300px;
  height: 115px;
  background: #ECEFF8;
  border: 2px solid rgba(252, 252, 252, 0.40218);
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.561517), 6px 6px 10px rgba(58, 62, 118, 0.086675), inset 2px 2px 4px 1px rgba(61, 53, 138, 0.086757);
  border-radius: 15px;
  display: flex;
  align-items: center;
}
body .main .mini-cards .mini-card .progress-bar {
  filter: drop-shadow(0 0 2px #fff);
  margin-left: 36px;
}
body .main .mini-cards .mini-card .percent-data {
  margin-left: 21px;
}
body .main .mini-cards .mini-card .percent-data h5 {
  padding: 0;
  margin: 0;
  font-family: Nunito;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  color: #121323;
}
body .main .mini-cards .mini-card .percent-data span {
  font-family: Nunito;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #121323;
}
body .main .mini-cards .mini-card .dropdown-btn {
  position: absolute;
  top: 25px;
  right: 25px;
}
body .main .mini-cards .add-card {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 2px 2px 4px rgba(61, 53, 138, 0.086757);
  filter: drop-shadow(-6px -6px 10px rgba(255, 255, 255, 0.561517)), drop-shadow(6px 6px 10px rgba(58, 62, 118, 0.086675));
  border-radius: 15px;
  border: 2px solid rgba(61, 53, 138, 0.086757);
}
body .main .mini-cards .add-card span {
  font-family: Nunito;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  margin-top: 10px;
  color: #595F97;
  mix-blend-mode: normal;
  opacity: 0.49;
  display: block;
  width: 100px;
}
body .main .mini-cards .add-card .icon {
  opacity: 0.49;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="main">
  
  
  <div class="graph-card">
    
    <div class="data-box">
      <span>50</span>
      <span>40</span>
      <span>30</span>
      <span>20</span>
      <span>10</span>
      <span>0</span>
    </div>
  
    <div class="graph-box">
      
      <svg width="752" height="287" viewBox="0 0 752 287" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 286H751.5" stroke="#C6CEE3"/>
<path d="M0 229H751.5" stroke="#C6CEE3"/>
<path d="M0 172H751.5".........完整代码请登录后点击上方下载按钮下载查看