classroom/src/views/cloudPractice/component/play-loading/index.module.scss

.audioAnimate {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30%;

    div {
        width: 5px;
        height: 20px;
        background: linear-gradient(135deg, #FF9946 0%, #FF5B20 100%);
        transform-origin: bottom;
        border-radius: 5px 5px 0 0;
        margin: 0 2px;
    }

    & div:nth-child(1) {
        animation: musicWave 0.5s infinite linear both alternate;
    }

    & div:nth-child(2) {
        animation: musicWave 0.2s infinite linear both alternate;
    }

    & div:nth-child(3) {
        animation: musicWave 0.6s infinite linear both alternate;
    }

    & div:nth-child(4) {
        animation: musicWave 0.3s infinite linear both alternate;
    }
}


@keyframes musicWave {
    0% {
        height: 5px;
    }

    100% {
        height: 20px;
    }
}