用坐标控制背景图标css,纯CSS实现的细格子坐标背景和柱状图

CSS

语言：

CSSSCSS

确定

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);

}

}