纯CSS实现的细格子坐标背景和柱状图

blueprint chart

css3, axis, chart

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    display: flex;
    justify-content: center;
    margin: 0;
    height: 100vh;
    background: radial-gradient(circle, #6a92b6, #326598 11.25em, #326598 16.875em, #193c4a);
}
.graph {
    align-self: center;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border: solid 0.0625em #326598;
    width: 22.5em;
    height: 22.5em;
    background: linear-gradient(rgba(242, 241, 240, 0.1) 0.125em, transparent 0) 0 -0.125em, linear-gradient(90deg, rgba(242, 241, 240, 0.1) 0.125em, transparent 0) -0.125em 0;
    background-size: 0.75em 0.75em;
}
.graph:before,
.graph:after {
    position: absolute;
    content: '';
}
.graph:before {
    bottom: 1.4375em;
    left: 1.4375em;
    box-sizing: border-box;
    border: solid 0 rgba(242, 241, 240, 0.35);
    border-width: 0 0 0.125em 0.125em;
    width: 19.5em;
    height: 19.5em;
}
.graph:after {
    top: 0;
    right: 0;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, 0) 25%, #326598 50%);
    animation: reveal 10s linear infinite;
}
@keyframes reveal {
    75%, 100% {
        transform: translate(100%, -100%);
    }
}
.bar {
    position: absolute;
    width: 1.5em;
    transform-origin: 0 100%;
}
.bar:nth-child(1) {
    bottom: 3em;
    left: 3em;
    height: 3.75em;
    background: #aaaaaa;
    animation: grow-1 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-1 {
    0%, 12.5% {
        transform: scaleY(0);
    }
    25%,
    100% {
        transform: scaleY(1);
    }
}
.bar:nth-child(2) {
    bottom: 3em;
    left: 6em;
    height: 5.25em;
    background: #b8b8b8;
    animation: grow-2 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-2 {
    0%, 25% {
        transform: scaleY(0);
    }
    37.5%,
    100% {
        transform: scaleY(1);
    }
}
.bar:nth-child(3) {
    bottom: 3em;
    left: 9em;
    height: 7.5em;
    background: #c6c6c6;
    animation: grow-3 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-3 {
    0%, 37.5% {
        transform: scaleY(0);
    }
    50%,
    100% {
        transform: scaleY(1);
    }
}
.bar:nth-child(4) {
    bottom: 3em;
    left: 12em;
    height: 10.5em;
    background: #d5d5d5;
    animation: grow-4 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-4 {
    0%, 50% {
        transform: scaleY(0);
    }
    62.5%,
    100% {
        transform: scaleY(1);
    }
}
.bar:nth-child(5) {
    bottom: 3em;
    left: 15em;
    height: 12em;
    background: #e3e3e3;
    animation: grow-5 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-5 {
    0%, 62.5% {
        transform: scaleY(0);
    }
    75%,
    100% {
        transform: scaleY(1);
    }
}
.bar:nth-child(6) {
    bottom: 3em;
    left: 18em;
    height: 17.25em;
    background: #f1f1f1;
    animation: grow-6 10s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
@keyframes grow-6 {
    0%, 75% {
        transform: scaleY(0);
    }
    87.5%,
    100% {
        transform: scaleY(1);
    }
}

HTML

blueprint chart

css3, axis, chart

编辑器支持Emmet

快捷键

blueprint chart

css3, axis, chart

纯CSS3实现的粒子背景图案

使用SVG+CSS3实现带旋转星辰背景的动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：