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, user-scalable = no">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1em;
text-align: center;
color: #444;
background: #d0d0d0;
}
h1 {
font-size: 2.5em;
margin: 2em 0 .5em;
}
h2 {
margin-bottom: 3em;
}
em,
strong {
font-weight: 700;
}
input {
display: none;
}
article,
section {
position: relative;
display: block;
margin-bottom: 2em;
padding: 0;
}
article:not(section):last-of-type,
section:not(section):last-of-type {
margin-bottom: 0;
}
p {
line-height: 1.5em;
max-width: 20em;
margin: 1.5em auto 2em;
padding-bottom: 2em;
}
p span {
display: block;
}
.content {
position: absolute;
overflow: hidden;
width: 100%;
margin: 5em auto 0;
}
.content article {
transition: transform .3s ease-in-out;
transform: translateX(100%);
}
.content article p {
border-bottom: 1px dotted #444;
}
.content article label {
display: inline-block;
margin-bottom: 3em;
}
.content article label input {
display: inline-block;
}
.container {
z-index: 1;
display: flex;
overflow: hidden;
flex-direction: column;
justify-content: center;
}
/*
*
*
START // CHART'S RULES
-> "if you're picking code, don't forget the variables :)"
*/
.chart {
font-size: 1.8em;
display: flex;
flex-direction: row;
height: 12em;
justify-content: center;
perspective: 1000px;
perspective-origin: 50% 50%;
}
.bar {
font-size: 1em;
position: relative;
width: 2em;
padding: 1em;
transition: transform 2s linear;
transform: rotateX(-30deg) rotateY(-135deg);
transform-style: preserve-3d;
}
.bar.red .face.floor {
background-color: rgba(185, 0, 110, 0.2);
}
.bar.red .face > .growing-bar {
background-color: rgba(236, 0, 140, 0.8);
}
.bar.red .face > .growing-bar:before {
color: #530031;
border-top-color: #b9006e;
}
.bar.cyan .face.floor {
background-color: rgba(39, 187, 241, 0.2);
}
.bar.cyan .face > .growing-bar {
background-color: rgba(87, 202, 244, 0.8);
}
.bar.cyan .face > .growing-bar:before {
color: #0b7da7;
border-top-color: #27bbf1;
}
.bar.navy .face.floor {
background-color: rgba(6, 36, 58, 0.2);
}
.bar.navy .face > .growing-bar {
background-color: rgba(10, 64, 105, 0.8);
}
.bar.navy .face > .growing-bar:before {
color: black;
border-top-color: #06243a;
}
.bar.lightGray .face.floor {
background-color: rgba(119, 119, 119, 0.2);
}
.bar.lightGray .face > .growing-bar {
background-color: rgba(145, 145, 145, 0.8);
}
.bar.lightGray .face > .growing-bar:before {
color: #444444;
border-top-color: #777777;
}
.bar.yellow .face.floor {
background-color: rgba(194, 157, 11, 0.2);
}
.bar.yellow .face > .growing-bar {
background-color: rgba(241, 196, 15, 0.8);
}
.bar.yellow .face > .growing-bar:before {
color: #614f06;
border-top-color: #c29d0b;
}
.bar.lime .face.floor {
background-color: rgba(88, 150, 0, 0.2);
}
.bar.lime .face > .growing-bar {
background-color: rgba(118, 201, 0, 0.8);
}
.bar.lime .face > .growing-bar:before {
color: #1c3000;
border-top-color: #589600;
}
.bar.gray .face.floor {
background-color: rgba(43, 43, 43, 0.2);
}
.bar.gray .face > .growing-bar {
background-color: rgba(68, 68, 68, 0.8);
}
.bar.gray .face > .growing-bar:before {
color: black;
border-top-color: #2b2b2b;
}
.bar .face {
position: relative;
bottom: 0;
width: 2em;
height: 2em;
background-position: center center;
}
.bar .side-0,
.bar .side-1 {
overflow: hidden;
height: 10em;
}
.bar .side-0 {
transform: rotateY(90deg) translateZ(1em);
background-color: rgba(241, 241, 241, 0.8);
}
.bar .side-0 .growing-bar {
background-color: #57caf4;
}
.bar .side-1 {
transform: rotateY(180deg) translateY(-10em) translateZ(1em);
background-color: rgba(216, 216, 216, 0.8);
}
.bar .side-1 .growing-bar {
background-color: #10b3ef;
}
.bar .top {
transform: rotateX(90deg) translateZ(21em);
text-align: center;
background-color: rgba(254, 254, 254, 0.8);
}
.bar .floor {
transform: rotateX(-90deg) translateY(0em) translateZ(-13em) rotate(180deg);
text-align: center;
background-color: transparent;
box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.3), 0.6em -1em 3em rgba(0, 0, 0, 0.3), 1em 1em 10em rgba(254, 254, 254, 0.8);
}
.bar .growing-bar {
display: inline-block;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
transform: translateY(100%);
opacity: 0;
}
.bar .growing-bar:before {
font-family: 'Open Sans', sans-serif;
font-size: .6em;
font-weight: 700;
display: inline-block;
box-sizing: content-box;
padding: .8em;
text-align: center;
opacity: 1;
color: #0a4069;
border-top: 2px dotted #0a4069;
}
.small-font-size {
font-size: 1em;
}
.reglar-font-size {
font-size: 1.5em;
}
.big-font-size {
font-size: 1.8em;
}
.chart .bar-100 .face.side-0 .growing-bar,
.chart .bar-100 .face.side-1 .growing-bar {
transform: translateY(0%);
opacity: .8;
}
.chart .bar-100 .face.side-0 .growing-bar:before,
.chart .bar-100 .face.side-1 .growing-bar:before {
content: "100";
}
.chart .bar-99 .face.side-0 .growing-bar,
.chart .bar-99 .face.side-1 .growing-bar {
transform: translateY(1%);
opacity: .8;
}
.chart .bar-99 .face.side-0 .growing-bar:before,
.chart .bar-99 .face.side-1 .growing-bar:before {
content: "99";
}
.chart .bar-98 .face.side-0 .growing-bar,
.chart .bar-98 .face.side-1 .growing-bar {
transform: translateY(2%);
opacity: .8;
}
.chart .bar-98 .face.side-0 .growing-bar:before,
.chart .bar-98 .face.side-1 .growing-bar:before {
content: "98";
}
.chart .bar-97 .face.side-0 .growing-bar,
.chart .bar-97 .face.side-1 .growing-bar {
transform: translateY(3%);
opacity: .8;
}
.chart .bar-97 .face.side-0 .growing-bar:before,
.chart .bar-97 .face.side-1 .growing-bar:before {
content: "97";
}
.chart .bar-96 .face.side-0 .growing-bar,
.chart .bar-96 .face.side-1 .growing-bar {
transform: translateY(4%);
opacity: .8;
}
.chart .bar-96 .face.side-0 .growing-bar:before,
.chart .bar-96 .face.side-1 .growing-bar:before {
content: "96";
}
.chart .bar-95 .face.side-0 .growing-bar,
.chart .bar-95 .face.side-1 .growing-bar {
transform: translateY(5%);
opacity: .8;
}
.chart .bar-95 .face.side-0 .growing-bar:before,
.chart .bar-95 .face.side-1 .growing-bar:before {
content: "95";
}
.chart .bar-94 .face.side-0 .growing-bar,
.chart .bar-94 .face.side-1 .growing-bar {
transform: translateY(6%);
opacity: .8;
}
.chart .bar-94 .face.side-0 .growing-bar:before,
.chart .bar-94 .face.side-1 .growing-bar:before {
content: "94";
}
.chart .bar-93 .face.side-0 .growing-bar,
.chart .bar-93 .face.side-1 .growing-bar {
transform: translateY(7%);
opacity: .8;
}
.chart .bar-93 .face.side-0 .growing-bar:before,
.chart .bar-93 .face.side-1 .growing-bar:before {
content: "93";
}
.chart .bar-92 .face.side-0 .growing-bar,
.chart .bar-92 .face.side-1 .growing-bar {
transform: translateY(8%);
opacity: .8;
}
.chart .bar-92 .face.side-0 .growing-bar:before,
.chart .bar-92 .face.side-1 .growing-bar:before {
content: "92";
}
.chart .bar-91 .face.side-0 .growing-bar,
.chart .bar-91 .face.side-1 .growing-bar {
transform: translateY(9%);
opacity: .8;
}
.chart .bar-91 .face.side-0 .growing-bar:before,
.chart .bar-91 .face.side-1 .growing-bar:before {
content: "91";
}
.chart .bar-90 .face.side-0 .growing-bar,
.chart .bar-90 .face.side-1 .growing-bar {
transform: translateY(10%);
opacity: .8;
}
.chart .bar-90 .face.side-0 .growing-bar:before,
.chart .bar-90 .face.side-1 .growing-bar:before {
content: "90";
}
.chart .bar-89 .face.side-0 .growing-bar,
.chart .bar-89 .face.side-1 .growing-bar {
transform: translateY(11%);
opacity: .8;
}
.chart .bar-89 .face.side-0 .growing-bar:before,
.chart .bar-89 .face.side-1 .growing-bar:before {
content: "89";
}
.chart .bar-88 .face.side-0 .growing-bar,
.chart .bar-88 .face.side-1 .growing-bar {
transform: translateY(12%);
opacity: .8;
}
.chart .bar-88 .face.side-0 .growing-bar:before,
.chart .bar-88 .face.side-1 .growing-bar:before {
content: "88";
}
.chart .bar-87 .face.side-0 .growing-bar,
.chart .bar-87 .face.side-1 .growing-bar {
transform: translateY(13%);
opacity: .8;
}
.chart .bar-87 .face.side-0 .growing-bar:before,
.chart .bar-87 .face.side-1 .growing-bar:before {
content: "87";
}
.chart .bar-86 .face.side-0 .growing-bar,
.chart .bar-86 .face.side-1 .growing-bar {
transform: translateY(14%);
opacity: .8;
}
.chart .bar-86 .face.side-0 .growing-bar:before,
.chart .bar-86 .face.side-1 .growing-bar:before {
content: "86";
}
.chart .bar-85 .face.side-0 .growing-bar, input[name='status']:checked + .content article .chart .bar.bar-3 .face.side-0 .growing-bar,
.chart .bar-85 .face.side-1 .growing-bar,
input[name='status']:checked + .content article .chart .bar.bar-3 .face.side-1 .growing-bar {
transform: translateY(15%);
opacity: .8;
}
.chart .bar-85 .face.side-0 .growing-bar:before, input[name='status']:checked + .content article .chart .bar.bar-3 .face.side-0 .growing-bar:before,
.chart .bar-85 .face.side-1 .growing-bar:before,
input[name='status']:checked + .content article .chart .bar.bar-3 .face.side-1 .growing-bar:before {
content: "85";
}
.chart .bar-84 .face.side-0 .growing-bar,
.chart .bar-84 .face.side-1 .growing-bar {
transform: translateY(16%);
opacity: .8;
}
.chart .bar-84 .face.side-0 .growing-bar:before,
.chart .bar-84 .face.side-1 .growing-bar:before {
content: "84";
}
.chart .bar-83 .face.side-0 .growing-bar,
.chart .bar-83 .face.side-1 .growing-bar {
transform: translateY(17%);
opacity: .8;
}
.chart .bar-83 .face.side-0 .growing-bar:before,
.chart .bar-83 .face.side-1 .growing-bar:before {
content: "83";
}
.chart .bar-82 .face.side-0 .growing-bar,
.chart .bar-82 .face.side-1 .growing-bar {
transform: translateY(18%);
opacity: .8;
}
.chart .bar-82 .face.side-0 .growing-bar:before,
.chart .bar-82 .face.side-1 .growing-bar:before {
content: "82";
}
.chart .bar-81 .face.side-0 .growing-bar,
.chart .bar-81 .face.side-1 .growing-bar {
transform: translateY(19%);
opacity: .8;
}
.chart .bar-81 .face.side-0 .growing-bar:before,
.chart .bar-81 .face.side-1 .growing-bar:before {
content: "81";
}
.chart .bar-80 .face.side-0 .growing-bar,
.chart .bar-80 .face.side-1 .growing-bar {
transform: translateY(20%);
opacity: .8;
}
.chart .bar-80 .face.side-0 .growing-bar:before,
.chart .bar-80 .face.side-1 .growing-bar:before {
content: "80";
}
.chart .bar-79 .face.side-0 .growing-bar,
.chart .bar-79 .face.side-1 .growing-bar {
transform: translateY(21%);
opacity: .8;
}
.chart .bar-79 .face.side-0 .growing-bar:before,
.chart .bar-79 .face.side-1 .growing-bar:before {
content: "79";
}
.chart .bar-78 .face.side-0 .growing-bar,
.chart .bar-78 .face.side-1 .growing-bar {
transform: translateY(22%);
opacity: .8;
}
.chart .bar-78 .face.side-0 .growing-bar:before,
.chart .bar-78 .face.side-1 .growing-bar:before {
content: "78";
}
.chart .bar-77 .face.side-0 .growing-bar,
.chart .bar-77 .face.side-1 .growing-bar {
transform: translateY(23%);
opacity: .8;
}
.chart .bar-77 .face.side-0 .growing-bar:before,
.chart .bar-77 .face.side-1 .growing-bar:before {
content: "77";
}
.chart .bar-76 .face.side-0 .growing-bar,
.chart .bar-76 .face.side-1 .growing-bar {
transform: translateY(24%);
opacity: .8;
}
.chart .bar-76 .face.side-0 .growing-bar:before,
.chart .bar-76 .face.side-1 .growing-bar:before {
content: "76";
}
.chart .bar-75 .face.side-0 .growing-bar, input[name='status']:checked + .content article .chart .bar.bar-0 .face.side-0 .growing-bar,
.chart .bar-75 .face.side-1 .growing-bar,
input[name='status']:checked + .content article .chart .bar.bar-0 .face.side-1 .growing-bar {
transform: translateY(25%);
opacity: .8;
}
.chart .bar-75 .face.side-0 .growing-bar:before, input[name='status']:checked + .content article .chart .bar.bar-0 .face.side-0 .growing-bar:before,
.chart .bar-75 .face.side-1 .growing-bar:before,
input[name='status']:checked + .content article .chart .bar.bar-0 .face.side-1 .growing-bar:before {
content: "75";
}
.chart .bar-74 .face.side-0 .growing-bar,
.chart .bar-74 .face.side-1 .growing-bar {
transform: translateY(26%);
opacity: .8;
}
.chart .bar-74 .face.side-0 .growing-bar:before,
.chart .bar-74 .face.side-1 .growing-bar:before {
content: "74";
}
.chart .bar-73 .face.side-0 .growing-bar,
.chart .bar-73 .face.side-1 .growing-bar {
transform: translateY(27%);
opacity: .8;
}
.chart .bar-73 .face.side-0 .growing-bar:before,
.chart .bar-73 .face.side-1 .growing-bar:before {
content: "73";
}
.chart .bar-72 .face.side-0 .growing-bar,
.chart .bar-72 .face.side-1 .growing-bar {
transform: translateY(28%);
opacity: .8;
}
.chart .bar-72 .face.side-0 .growing-bar:before,
.chart .bar-72 .face.side-1 .growing-bar:before {
content: "72";
}
.chart .bar-71 .face.side-0 .growing-bar,
.chart .bar-71 .face.side-1 .growing-bar {
transform: translateY(29%);
opacity: .8;
}
.chart .bar-71 .face.side-0 .growing-bar:before,
.chart .bar-71 .face.side-1 .growing-bar:before {
content: "71";
}
.chart .bar-70 .face.side-0 .growing-bar,
.chart .bar-70 .face.side-1 .growing-bar {
transform: translateY(30%);
opacity: .8;
}
.chart .bar-70 .face.side-0 .growing-bar:before,
.chart .bar-70 .face.side-1 .growing-bar:before {
content: "70";
}
.chart .bar-69 .face.side-0 .growing-bar,
.chart .bar-69 .face.side-1 .growing-bar {
transform: translateY(31%);
opacity: .8;
}
.chart .bar-69 .face.side-0 .growing-bar:before,
.chart .bar-69 .face.side-1 .growing-bar:before {
content: "69";
}
.chart .bar-68 .face.side-0 .growing-bar,
.chart .bar-68 .face.side-1 .growing-bar {
transform: translateY(32%);
opacity: .8;
}
.chart .bar-68 .face.side-0 .growing-bar:before,
.chart .bar-68 .face.side-1 .growing-bar:before {
content: "68";
}
.chart .bar-67 .face.side-0 .growing-bar,
.chart .bar-67 .face.side-1 .growing-bar {
transform: translateY(33%);
opacity: .8;
}
.chart .bar-67 .face.side-0 .growing-bar:before,
.chart .bar-67 .face.side-1 .growing-bar:before {
content: "67";
}
.chart .bar-66 .face.side-0 .growing-bar,
.chart .bar-66 .face.side-1 .growing-bar {
transform: translateY(34%);
opacity: .8;
}
.chart .bar-66 .face.side-0 .growing-bar:before,
.chart .bar-66 .face.side-1 .growing-bar:before {
content: "66";
}
.chart .bar-65 .face.side-0 .growing-bar,
.chart .bar-65 .face.side-1 .growing-bar {
transform: translateY(35%);
opacity: .8;
}
.chart .bar-65 .face.side-0 .growing-bar:before,
.chart .bar-65 .face.side-1 .growing-bar:before {
content: "65";
}
.chart .bar-64 .face.side-0 .growing-bar,
.chart .bar-64 .face.side-1 .growing-bar {
transform: translateY(36%);
opacity: .8;
}
.chart .bar-64 .face.side-0 .growing-bar:before,
.chart .bar-64 .face.side-1 .growing-bar:before {
content: "64";
}
.chart .bar-63 .face.side-0 .growing-bar,
.chart .bar-63 .face.side-1 .growing-bar {
transform: translateY(37%);
opacity: .8;
}
.chart .bar-63 .face.side-0 .growing-bar:before,
.chart .bar-63 .face.side-1 .growing-bar:before {
content: "63";
}
.chart .bar-62 .face.side-0 .growing-bar,
.chart .bar-62 .face.side-1 .growing-bar {
transform: translateY(38%);
opacity: .8;
}
.chart .bar-62 .face.side-0 .growing-bar:before,
.chart .bar-62 .face.side-1 .growing-bar:before {
content: "62";
}
.chart .bar-61 .face.side-0 .growing-bar,
.chart .bar-61 .face.side-1 .growing-bar {
transform: translateY(39%);
opacity: .8;
}
.chart .bar-61 .face.side-0 .growing-bar:before,
.chart .bar-61 .face.side-1 .growing-bar:before {
content: "61";
}
.chart .bar-60 .face.side-0 .growing-bar,
.chart .bar-60 .face.side-1 .growing-bar {
transform: translateY(40%);
opacity: .8;
}
.chart .bar-60 .face.side-0 .growing-bar:before,
.chart .bar-60 .face.side-1 .growing-bar:before {
content: "60";
}
.chart .bar-59 .face.side-0 .growing-bar,
.chart .bar-59 .face.side-1 .growing-bar {
transform: translateY(41%);
opacity: .8;
}
.chart .bar-59 .face.side-0 .growing-bar:before,
.chart .bar-59 .face.side-1 .growing-bar:before {
content: "59";
}
.chart .bar-58 .face.side-0 .growing-bar,
.chart .bar-58 .face.side-1 .growing-bar {
transform: translateY(42%);
opacity: .8;
}
.chart .bar-58 .face.side-0 .growing-bar:before,
.chart .bar-58 .face.side-1 .growing-bar:before {
content: "58";
}
.chart .bar-57 .face.side-0 .growing-bar,
.chart .bar-57 .face.side-1 .growing-bar {
transform: translateY(43%);
opacity: .8;
}
.chart .bar-57 .face.side-0 .growing-bar:before,
.chart .bar-57 .face.side-1 .growing-bar:before {
content: "57";
}
.chart .bar-56 .face.side-0 .growing-bar,
.chart .bar-56 .face.side-1 .growing-bar {
transform: translateY(44%);
opacity: .8;
}
.chart .bar-56 .face.side-0 .growing-bar:before,
.chart .bar-56 .face.side-1 .growing-bar:before {
content: "56";
}
.chart .bar-55 .face.side-0 .growing-bar, input[name='status']:checked + .content article .chart .bar.bar-1-1 .face.side-0 .growing-bar,
.chart .bar-55 .face.side-1 .growing-bar,
input[name='status']:checked + .content article .chart .bar.bar-1-1 .face.side-1 .growing-bar {
transform: translateY(45%);
opacity: .8;
}
.chart .bar-55 .face.side-0 .growing-bar:before, input[name='status']:checked + .content article .chart .bar.bar-1-1 .face.side-0 .growing-bar:before,
.chart .bar-55 .face.side-1 .growing-bar:before,
input[name='status']:checked + .content article .chart .bar.bar-1-1 .face.side-1 .growing-bar:before {
content: "55";
}
.chart .bar-54 .face.side-0 .growing-bar,
.chart .bar-54 .face.side-1 .growing-bar {
transform: translateY(46%);
opacity: .8;
}
.chart .bar-54 .face.side-0 .growing-bar:before,
.chart .bar-54 .face.side-1 .growing-bar:before {
content: "54";
}
.chart .bar-53 .face.side-0 .growing-bar,
.chart .bar-53 .face.side-1 .growing-bar {
transform: translateY(47%);
opacity: .8;
}
.chart .bar-53 .face.side-0 .growing-bar:before,
.chart .bar-53 .face.side-1 .growing-bar:before {
content: "53";
}
.chart .bar-52 .face.side-0 .growing-bar,
.chart .bar-52 .face.side-1 .growing-bar {
transform: translateY(48%);
opacity: .8;
}
.chart .bar-52 .face.side-0 .growing-bar:before,
.chart .bar-52 .face.side-1 .growing-bar:before {
content: "52";
}
.chart .bar-51 .face.side-0 .growing-bar,
.chart .bar-51 .face.side-1 .growing-bar {
transform: translateY(49%);
opacity: .8;
}
.chart .bar-51 .face.side-0 .growing-bar:before,
.chart .bar-51 .face.side-1 .growing-bar:before {
content: "51";
}
.chart .bar-50 .face.side-0 .growing-bar,
.chart .bar-50 .face.side-1 .growing-bar {
transform: translateY(50%);
opacity: .8;
}
.chart .bar-50 .face.side-0 .growing-bar:before,
.chart .bar-50 .face.side-1 .growing-bar:before {
content: "50";
}
.chart .bar-49 .face.side-0 .growing-bar,
.chart .bar-49 .face.side-1 .growing-bar {
transform: translateY(51%);
opacity: .8;
}
.chart .bar-49 .face.side-0 .growing-bar:before,
.chart .bar-49 .face.side-1 .growing-bar:before {
content: "49";
}
.chart .bar-48 .face.side-0 .growing-bar,
.chart .bar-48 .face.side-1 .growing-bar {
transform: translateY(52%);
opacity: .8;
}
.chart .bar-48 .face.side-0 .growing-bar:before,
.chart .bar-48 .face.side-1 .growing-bar:before {
content: "48";
}
.chart .bar-47 .face.side-0 .growing-bar,
.chart .bar-47 .face.side-1 .growing-bar {
transform: translateY(53%);
opacity: .8;
}
.chart .bar-47 .face.side-0 .growing-bar:before,
.chart .bar-47 .face.side-1 .growing-bar:before {
content: "47";
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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