css3图表实时,CSS3 交互式曲线图表

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

margin: 0;

min-height: 100vh;

}

body {

background-image: linear-gradient(-45deg, DarkOrchid 30%, DarkBlue);

background-size: 160%;

background-position: center center;

font-size: 15px;

font-family: Lato, Helvetica Neue, sans-serif;

}

.stats-container {

width: 500px;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

border-radius: 0.3em;

padding: 1em;

background: #fff;

}

.stats-container h1 {

font-weight: 300;

color: DarkBlue;

text-align: center;

font-size: 1.8em;

}

.stats-chart-wrapper {

padding-left: 1.6em;

position: relative;

min-height: 140px;

background-image: linear-gradient(rgba(153, 50, 204, 0.2) 3.33%, rgba(0, 0, 0, 0) 3.34%);

background-size: auto 1.6em;

background-repeat: repeat;

background-position-y: 12px;

}

.stats-chart-wrapper .stats-labels:before {

content: attr(data-labels);

width: 1em;

padding-right: 1em;

left: 0;

position: absolute;

line-height: 2em;

font-size: 0.8em;

color: rgba(0, 0, 139, 0.5);

background: #fff;

}

.stats-chart-wrapper .stats-graph {

width: calc(94.9%);

height: 100%;

bottom: 0.5em;

position: absolute;

background-image: linear-gradient(Lavender, rgba(230, 230, 250, 0.2));

opacity: 1;

transition: all 0.3s ease;

-webkit-clip-path: polygon(0% 45%, 0% 100%, 100% 100%, 100% 71%, 90% 11%, 80% 46%, 70% 28%, 60% 67%, 50% 38%, 40% 28%, 30% 76%, 20% 35%, 10% 77%);

}

.stats-chart-wrapper .stats-graph:hover {

-webkit-clip-path: polygon(0% 55%, 0% 100%, 100% 100%, 100% 41%, 90% 81%, 80% 36%, 70% 78%, 60% 27%, 50% 78%, 40% 58%, 30% 36%, 20% 45%, 10% 27%);

}