纯CSS实现的3D柱状图

pure CSS 3D graph

css3, chart

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    perspective: 65em;
    perspective-origin: 50% calc(50% - 24em);
    background: #000;
}
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
}
.assembly {
    transform: rotateY(0deg) translate3d(24em, -24em, 30em);
    animation: move 13s ease-in-out infinite;
}
@keyframes move {
    80%, 100% {
        transform: rotateY(-45deg) translate3d(-24em, 3em, -6em);
    }
}
.plane {
    margin: -100vmax;
    width: 200vmax;
    height: 200vmax;
    transform: rotateX(90deg) translateZ(-12em);
    background: radial-gradient(rgba(0, 0, 0, 0) 50%, #000000 71%), linear-gradient(rgba(252, 249, 216, 0.1) 0.125em, transparent 0), linear-gradient(90deg, rgba(252, 249, 216, 0.1) 0.125em, transparent 0);
    background-position: 50% 50%;
    background-size: 100%, 3em 3em, 3em 3em;
}
.bar {
    transform-origin: 0 12em 0;
}
.bar:nth-child(1) {
    margin-left: -18em;
    animation: grow-1 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(1) .face:nth-child(1) {
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}
.bar:nth-child(1) .face:nth-child(2) {
    -webkit-filter: brightness(0.55);
    filter: brightness(0.55);
}
.bar:nth-child(1) .face:nth-child(3) {
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
}
.bar:nth-child(1) .face:nth-child(4) {
    -webkit-filter: brightness(0.45);
    filter: brightness(0.45);
}
@keyframes grow-1 {
    0%, 0% {
        transform: scaleY(0.01);
    }
    8.33333%,
    100% {
        transform: scaleY(0.1);
    }
}
.bar:nth-child(2) {
    margin-left: -12em;
    animation: grow-2 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(2) .face:nth-child(1) {
    -webkit-filter: brightness(0.65);
    filter: brightness(0.65);
}
.bar:nth-child(2) .face:nth-child(2) {
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}
.bar:nth-child(2) .face:nth-child(3) {
    -webkit-filter: brightness(0.55);
    filter: brightness(0.55);
}
.bar:nth-child(2) .face:nth-child(4) {
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
}
@keyframes grow-2 {
    0%, 8.33333% {
        transform: scaleY(0.01);
    }
    16.66667%,
    100% {
        transform: scaleY(0.16);
    }
}
.bar:nth-child(3) {
    margin-left: -6em;
    animation: grow-3 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(3) .face:nth-child(1) {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
.bar:nth-child(3) .face:nth-child(2) {
    -webkit-filter: brightness(0.65);
    filter: brightness(0.65);
}
.bar:nth-child(3) .face:nth-child(3) {
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}
.bar:nth-child(3) .face:nth-child(4) {
    -webkit-filter: brightness(0.55);
    filter: brightness(0.55);
}
@keyframes grow-3 {
    0%, 16.66667% {
        transform: scaleY(0.01);
    }
    25%,
    100% {
        transform: scaleY(0.25);
    }
}
.bar:nth-child(4) {
    margin-left: 0em;
    animation: grow-4 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(4) .face:nth-child(1) {
    -webkit-filter: brightness(0.75);
    filter: brightness(0.75);
}
.bar:nth-child(4) .face:nth-child(2) {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
.bar:nth-child(4) .face:nth-child(3) {
    -webkit-filter: brightness(0.65);
    filter: brightness(0.65);
}
.bar:nth-child(4) .face:nth-child(4) {
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}
@keyframes grow-4 {
    0%, 25% {
        transform: scaleY(0.01);
    }
    33.33333%,
    100% {
        transform: scaleY(0.37);
    }
}
.bar:nth-child(5) {
    margin-left: 6em;
    animation: grow-5 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(5) .face:nth-child(1) {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}
.bar:nth-child(5) .face:nth-child(2) {
    -webkit-filter: brightness(0.75);
    filter: brightness(0.75);
}
.bar:nth-child(5) .face:nth-child(3) {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
.bar:nth-child(5) .face:nth-child(4) {
    -webkit-filter: brightness(0.65);
    filter: brightness(0.65);
}
@keyframes grow-5 {
    0%, 33.33333% {
        transform: scaleY(0.01);
    }
    41.66667%,
    100% {
        transform: scaleY(0.5);
    }
}
.bar:nth-child(6) {
    margin-left: 12em;
    animation: grow-6 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(6) .face:nth-child(1) {
    -webkit-filter: brightness(0.85);
    filter: brightness(0.85);
}
.bar:nth-child(6) .face:nth-child(2) {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}
.bar:nth-child(6) .face:nth-child(3) {
    -webkit-filter: brightness(0.75);
    filter: brightness(0.75);
}
.bar:nth-child(6) .face:nth-child(4) {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
@keyframes grow-6 {
    0%, 41.66667% {
        transform: scaleY(0.01);
    }
    50%,
    100% {
        transform: scaleY(0.64);
    }
}
.bar:nth-child(7) {
    margin-left: 18em;
    animation: grow-7 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(7) .face:nth-child(1) {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}
.bar:nth-child(7) .face:nth-child(2) {
    -webkit-filter: brightness(0.85);
    filter: brightness(0.85);
}
.bar:nth-child(7) .face:nth-child(3) {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}
.bar:nth-child(7) .face:nth-child(4) {
    -webkit-filter: brightness(0.75);
    filter: brightness(0.75);
}
@keyframes grow-7 {
    0%, 50% {
        transform: scaleY(0.01);
    }
    58.33333%,
    100% {
        transform: scaleY(0.81);
    }
}
.bar:nth-child(8) {
    margin-left: 24em;
    animation: grow-8 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(8) .face:nth-child(1) {
    -webkit-filter: brightness(0.95);
    filter: brightness(0.95);
}
.bar:nth-child(8) .face:nth-child(2) {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}
.bar:nth-child(8) .face:nth-child(3) {
    -webkit-filter: brightness(0.85);
    filter: brightness(0.85);
}
.bar:nth-child(8) .face:nth-child(4) {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}
@keyframes grow-8 {
    0%, 58.33333% {
        transform: scaleY(0.01);
    }
    66.66667%,
    100% {
        transform: scaleY(1);
    }
}
.face {
    margin: -1.5em;
    width: 3em;
    height: 3em;
    backface-visibility: hidden;
    box-shadow: 0 0 1px currentColor;
    color: #0cd;
    background: currentColor;
}
.face:nth-child(n + 2) {
    margin-top: -12em;
    height: 24em;
}
.face:nth-child(n + 2):before {
    position: absolute;
    top: 100%;
    left: 0;
    width: inherit;
    height: inherit;
    opacity: .08;
    background: inherit;
    content: '';
}
.face:nth-child(1) {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(12em);
}
.face:nth-child(2) {
    transform: rotate3d(0, 1, 0, -90deg) translateZ(1.5em);
}
.face:nth-child(3) {
    transform: rotate3d(0, 1, 0, 0deg) translateZ(1.5em);
}
.face:nth-child(4) {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(1.5em);
}

HTML

pure CSS 3D graph

css3, chart

编辑器支持Emmet

快捷键

pure CSS 3D graph

css3, chart

纯CSS3实现的3D画展（图片展览）

纯CSS3实现的3D地形（地图）构造器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：