30 lines
655 B
SCSS
30 lines
655 B
SCSS
#audio-bars {
|
|
height: 1em;
|
|
display: flex;
|
|
width: 12px;
|
|
}
|
|
|
|
.audio-bar {
|
|
background: var(--main-color);
|
|
width: 3px;
|
|
height: 1em;
|
|
animation: sound 1s cubic-bezier(.17,.37,.43,.67) infinite alternate;
|
|
will-change: opacity, transform;
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
@keyframes sound {
|
|
0% {
|
|
opacity: .35;
|
|
transform: scaleY(0.1) translateZ(0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scaleY(1) translateZ(0);
|
|
}
|
|
}
|
|
|
|
.audio-bar:nth-child(1) { animation-duration: 0.4s; }
|
|
.audio-bar:nth-child(2) { animation-duration: 0.2s; }
|
|
.audio-bar:nth-child(3) { animation-duration: 1.0s; }
|
|
.audio-bar:nth-child(4) { animation-duration: 0.3s; }
|