5个纯CSS实现的简单图表

CSS Charts，包含柱状图、环状图、线条图（水平、垂直）和点状分布图。

css3, chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2770
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    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%;
    }
}

HTML

<h2>Radial</h2>
    <div class="disks">
        <div class="disk" data-percent="75%" style="background: #666;"></div>
        <div class="disk" data-percent="50%" style="background: #777;"></div>
        <div class="disk" data-percent="25%" style="background: #888;"></div>
    </div>

<h2>Linear</h2>
    <h3>Horizonial</h3>
    <div class="flex-bar">
        <div class="flex-bar--item horiz-bar" data-percent="50%" style="flex: 50 0%; background-color: #666;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="30%" style="flex: 30 0%; background-color: #777;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="20%" style="flex: 20 0%; background-color: #888;"></div>
    </div>
    <div class="flex-bar">
        <div class="flex-bar--item horiz-bar" data-percent="10%" style="flex: 10 0%; background-color: #666;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="20%" style="flex: 20 0%; background-color: #777;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="80%" style="flex: 80 0%; background-color: #888;"></div>
    </div>
    <div class="flex-bar">
        <div class="flex-bar--item horiz-bar" data-percent="30%" style="flex: 30 0%; background-color: #666;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="30%" style="flex: 30 0%; background-color: #777;"></div>
        <div class="flex-bar--item horiz-bar" data-percent="60%" style="flex: 60 0%; background-color: #888;"></div>
    </div>

<h3>Vertical</h3>
    <section>

CSS Charts，包含柱状图、环状图、线条图（水平、垂直）和点状分布图。

css3, chart

编辑器支持Emmet

快捷键

CSS Charts，包含柱状图、环状图、线条图（水平、垂直）和点状分布图。

css3, chart

纯CSS实现一个简单实用的悬停提示信息框

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：