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