图表css,CSS3绘制简单图表 | Soo Smart!

学习css3的作业之一，制作一个简单的图表。

这里是源码和效果图。

参考文档:https://tympanus.net/Tutorials/Animated3DBarChart/

CSS源码：

@media screen and (max-width: 450px) {

.sm-graph-container {

font-size: 0.22em;

}

}

@media screen and (max-width: 630px){

.sm-graph-container {

font-size: 0.32em;

}

}

@media screen and (max-width: 720px){

.sm-graph-container {

font-size: 0.45em;

}

}

@media screen and (max-width: 765px){

.sm-graph-container {

font-size: 0.5em;

}

}

@media screen and (max-width: 1050px){

.sm-graph-container {

font-size: 0.6em;

}

}

@media screen and (max-width: 1125px){

.sm-graph-container {

font-size: 0.7em;

}

}

.sm-graph-container{

position: relative;

background-image: -webkit-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);

background-image: -moz-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);

background-image: -o-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);

background-image: -ms-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);

background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);

margin:40px 0 0 40px;

display: inline-block;

background:#222;

padding:0;

}

.sm-graph-container *{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.sm-graph-container:before{

position:absolute;

content:"";

width:100%;

bottom:0;

height:2.5em;

left:-1.25em;

display:block;

background-color:rgba(183,183,183,1);

transform:skew(-45deg);

}

.sm-graph-container:after {

position: absolute;

content: "";

width: 2.5em;

height: 30em;

left: -2.5em;

top: 1.25em;

background-color:rgba(183,183,183,.8);

-webkit-transform: skew(0deg, -45deg);

-moz-transform: skew(0deg, -45deg);

-o-transform: skew(0deg, -45deg);

-ms-transform: skew(0deg, -45deg);

transform: skew(0deg, -45deg);

z-index:-1;

}

.sm-graph-container > li{

display: inline-block;

position:relative;

vertical-align: bottom;

}

.sm-graph-container > li:first-child{

margin-left:2.5em;

}

.sm-graph-container > li:nth-last-child(2){

margin-right:2.5em;

}

.sm-graph-container > li > span{

position:absolute;

width:80%;

left:0;

text-align: center;

bottom:-2.5em;

}

.sm-graph-container > li:last-child{

position:absolute;

top:0;

left:0;

display:block;

width:100%;

height:100%;

}

.bar-wrapper{

overflow: hidden;

}

.bar-container{

position:relative;

width:12.5em;

height:30em;

margin-right:2.5em;

margin-top:2.5em;

}

.bar-background{

position: absolute;

width: 10em;

height: 30em;

top: -2.5em;

left: 2.5em;

z-index: 1;

background-color:rgba(160,160,160,0.1);

}

.bar-background:before{

content:"";

position: absolute;

width: 10em;

height: 2.5em;

left:-1.25em;

bottom:-2.5em;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

-ms-transform: skew(-45deg);

-o-transform: skew(-45deg);

transform: skew(-45deg);

z-index: 1;

background-color:rgba(160,160,160,0.2);

}

.bar-background:after{

content:"";

position: absolute;

width: 2.5em;

height: 100%;

left:-2.5em;

top:1.25em;

-webkit-transform: skew(0,-45deg);

-moz-transform: skew(0,-45deg);

-ms-transform: skew(0,-45deg);

-o-transform: skew(0,-45deg);

transform: skew(0,-45deg);

z-index: 1;

background-color:rgba(160,160,160,0.05);

}

.bar-inner{

position: absolute;

width: 10em;

height: 15em;

bottom:0;

z-index: 3;

background-color:rgba(5, 62, 123, .6);

-webkit-transition: height ease-out 3s;

-moz-transition: height ease-out 3s;

-ms-transition: height ease-out 3s;

-o-transition: height ease-out 3s;

transition: height ease-out 3s;

}

.bar-inner:hover{

background-color:rgba(161,160,0,1);

}

.bar-inner:before, .bar-inner:after{

position: absolute;

content:"";

}

.bar-inner:before{

width:10em;

height: 2.5em;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

-ms-transform: skew(-45deg);

-o-transform: skew(-45deg);

transform: skew(-45deg);

background-color:rgba(47, 83, 122, .7);

top:-2.5em;

left:1.25em;

}

.bar-inner:after{

width:2.5em;

height: 100%;

right:-2.5em;

top:-1.25em;

-webkit-transform: skew(0,-45deg);

-moz-transform: skew(0,-45deg);

-ms-transform: skew(0,-45deg);

-o-transform: skew(0,-45deg);

transform: skew(0,-45deg);

background-color:rgba(5, 62, 123, .6);

}

.bar-foreground{

position: absolute;

width: 10em;

height: 100%;

z-index: 3;

background-color:rgba(160,160,160,0.1);

}

.bar-foreground:before, .bar-foreground:after{

position: absolute;

content:"";

}

.bar-foreground:before{

width:2.5em;

height:30em;

top:-1.25em;

right:-2.5em;

z-index:3;

background-color:rgba(160,160,160,0.27);

-webkit-transform: skew(0,-45deg);

-moz-transform: skew(0,-45deg);

-ms-transform: skew(0,-45deg);

-o-transform: skew(0,-45deg);

transform: skew(0,-45deg);

}

.bar-foreground:after{

width:10em;

height:2.5em;

top:-2.5em;

left:1.25em;

background-color: rgba(160,160,160,0.2);

z-index:3;

-webkit-transform: skew(-45deg);

-moz-transform: skew(-45deg);

-ms-transform: skew(-45deg);

-o-transform: skew(-45deg);

transform: skew(-45deg);

}

.y-axis{

position: absolute;

top:0;

left:0;

z-index:0;

display: block;

width: 100%;

height: 30em;

}

.y-axis>li{

display:block;

height:25%;

width:100%;

position:absolute;

left:0;

}

.y-axis>li:before, .y-axis>li:after{

content:"";

position:absolute;

}

.y-axis>li:before{

width:2.5em;

left:-2.5em;

top:1.25em;

-webkit-transform: skew(0, -45deg);

-moz-transform: skew(0, -45deg);

-ms-transform: skew(0, -45deg);

-o-transform: skew(0, -45deg);

border-style: none none dotted;

border-color: rgba(100, 100, 100, 0.7);

border-width: 0 0 .15em;

background: rgba(133, 133, 133, 0.7);

}

.y-axis>li:after{

width:100%;

left:0;

border-style: none none dotted;

border-color: rgba(100, 100, 100, .15);

border-width: 0 0 .15em;

background: rgba(133, 133, 133, .15);

}

.y-axis>li>span{

position:absolute;

display: block;

left:-6em;

top:2.5em;

z-index:3;

}

HTML源码:

• Item1

• Item2

• Item3

• • 100%
  • 75%
  • 50%
  • 25%