html5 css3 图表,5个纯CSS实现的简单图表

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html {

background: #333;

}

body {

background: #fff;

}

h1 {

background: #333;

text-align: center;

padding: 1em;

margin-top: 0;

}

.color {

color: #FFC107;

}

.wrapper {

padding: 1em;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

max-width: 600px;

margin: 0 auto;

}

.wrapper h2 {

background: #FFC107;

width: 100%;

text-align: center;

border-radius: 50px;

color: #222;

}

.wrapper h3 {

text-align: center;

border-bottom: 0.2em solid #FFC107;

}

footer {

background: #333;

color: #ddd;

font-size: 0.8em;

padding: .5em;

text-align: center;

}

footer a {

color: inherit;

text-decoration: none;

border-bottom: 1px dotted #FFC107;

}

footer a:hover {

color: #FFC107;

border-bottom-style: solid;

}

.disks {

position: relative;

width: 10em;

max-width: 80vw;

height: 10em;

max-height: 80vw;

border-radius: 100%;

margin: 1em;

background: #ccc;

}

.disks .disk {

color: #ddd;

font-size: 11px;

line-height: 20px;

text-align: center;

position: absolute;

border-radius: 100%;

background: #ccc;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.15);

}

.disks .disk:hover {

opacity: 0.9;

color: #fff;

}

.flex-bar {

margin: 1em;

background: #ccc;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

white-space: nowrap;

border-radius: 50px;

overflow: hidden;

height: 2em;

font-size: 11px;

font-weight: 700;

line-height: 2em;

color: #ddd;

width: 100%;

}

.flex-bar.bar {

max-width: 30em;

height: 20em;

border-radius: .5em;

}

.flex-bar.bar .flex-bar--item {

-ms-flex-item-align: end;

align-self: flex-end;

-webkit-box-flex: 1;

-ms-flex-positive: 1;

flex-grow: 1;

-ms-flex-negative: 0;

flex-shrink: 0;

padding: 0;

text-align: center;

}

.flex-bar.vertical {

border-radius: .5em;

height: 20em;

-webkit-box-orient: vertical;

-webkit-box-direction: reverse;

-ms-flex-direction: column-reverse;

flex-direction: column-reverse;

width: 5em;

text-align: center;

float: left;

}

.flex-bar--item {

height: 0%;

display: block;

-ms-flex-item-align: stretch;

-ms-grid-row-align: stretch;

align-self: stretch;

height: 100%;

margin: 0;

padding: 0 1em;

overflow: hidden;

text-overflow: ellipsis;

min-width: 30px;

-webkit-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.15);

}

.flex-bar--item:hover {

color: #fff;

}

.flex-bar.dot {

max-width: 30em;

height: 20em;

border-radius: .5em;

background-image: -webkit-linear-gradient(bottom, transparent 24%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 76%, transparent 77%, transparent), -webkit-linear-gradient(left, transparent 24%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 76%, transparent 77%, transparent);

background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 76%, transparent 77%, transparent);

background-size: 2em 2em;

position: relative;

overflow: visible;

}

.flex-bar.dot .flex-bar--item {

-ms-flex-item-align: end;

align-self: flex-end;

-webkit-box-flex: 1;

-ms-flex-positive: 1;

flex-grow: 1;

-ms-flex-negative: 0;

flex-shrink: 0;

padding: 0;

text-align: center;

position: relative;

box-shadow: none;

padding: 0;

min-width: .7em;

overflow: visible;

}

.flex-bar.dot .flex-bar--item:before {

content: '';

position: absolute;

top: 0;

left: calc(50% - .3em);

width: .6em;

height: .6em;

border-radius: 50%;

padding: 0;

background: #333;

-webkit-transition: background 0ms 200ms, -webkit-transform 100ms 200ms ease;

transition: background 0ms 200ms, -webkit-transform 100ms 200ms ease;

transition: background 0ms 200ms, transform 100ms 200ms ease;

transition: background 0ms 200ms, transform 100ms 200ms ease, -webkit-transform 100ms 200ms ease;

}

.flex-bar.dot .flex-bar--item:after {

content: '';

position: absolute;

left: calc(50% - 1px);

top: 100%;

bottom: 0;

width: 2px;

background: red;

opacity: 1;

-webkit-transition: top 200ms ease-in-out;

transition: top 200ms ease-in-out;

}

.flex-bar.dot .flex-bar--item:hover:before {

background: red;

-webkit-transform: scale(1.5);

transform: scale(1.5);

}

.flex-bar.dot .flex-bar--item:hover:after {

top: 0;

opacity: 1;

}

@-webkit-keyframes vert-grow {

from {

height: 0%;

}

}

@keyframes vert-grow {

from {

height: 0%;

}

}

@-webkit-keyframes horiz-grow {

from {

width: 0%;

}

}

@keyframes horiz-grow {

from {

width: 0%;

}

}