orchestra-music-score/src/pages/detail/CheckDelayPopup/index.module.less

.delayContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    // background-image: url('./image/icon_bg.png');
    background-size: 110% 110%;
    background-position: center center;
    background-repeat: no-repeat;
    //background: darkblue;
    // perspective: 500px;
    .delayBg {
        position: relative;
        width: 130%;
        height: 100%;
        // top: -10%;
        left: -15%;
    }
    .delayAdorn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        pointer-events: none;
        width: 100%;
    }
    .leftAdorn {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 1.66rem;
    }
    .rightAdorn {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 1.28rem;
    }
}

.animationContainer {
    perspective: 500px;
    pointer-events: none;
}

.delayBackBtn {
    position: absolute;
    left: 20px;
    top: 20px;
    display: block;
    width: 21px;
    height: 21px;
}

.delayContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: delayContentFrame infinite 10s ease-in-out both;
    pointer-events: none;

    .iconContent {
        display: block;
        width: 237px;
        height: 167px;
    }

    .iconDuihua {
        position: absolute;
        top: -4px;
        left: 143px;
        display: block;
        transform-origin: left bottom;
        animation: iconDuihuaScale .5s linear both;
    }
    .iconDuihua_delay{
        animation-delay: .7s;
    }

    .iconDuihua1 {
        width: 160px;
        height: 45px;
    }

    .iconDuihua2 {
        width: 141px;
        height: 39px;
    }

    .iconDuihua3 {
        width: 164px;
        height: 37px;
    }

    .iconDianchi {
        display: block;
        position: absolute;
        left: 43px;
        bottom: -21px;
        width: 150px;
        height: 44px;
    }

    .iconDianchiActive {
        display: block;
        position: absolute;
        left: 52px;
        bottom: -8px;
        width: 132px;
        height: 22px;
        pointer-events: auto;
    }
}


.delayBody {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,100%);
    .delayBox {
        width: 4.68rem;
        position: relative;
        .dbTop {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -40%);
            .topIcon {
                width: 2.99rem;
                height: 0.39rem;
            }
            .topDots {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 90%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 0.22rem;
                img {
                    width: 0.2rem;
                    height: 0.2rem;
                }
                .aniDot3 {
                    position: relative;
                    width: 0.2rem;
                    height: 0.2rem;
                    background-image: url('./image/step_state_icon3.png');
                    background-size: 100% 100%;
                    background-position: center center;
                    background-repeat: no-repeat;
                    animation: aniBg 1.8s step-end infinite;
                }
            }
        }
        .dbContext {
            width: 4.68rem;
            height: 0.95rem;
        }
        .dbBtn {
            position: absolute;
            right: 0.21rem;
            bottom: 0.23rem;
            width: 1.21rem;
            height: 0.35rem;
            cursor: pointer;
            z-index: 999;
        }
    }
}
@keyframes aniBg {
    0% {
        background-image: url('./image/step_state_icon3.png');
    }

    25% {
        background-image: url('./image/step_state_icon1.png');
    }

    50% {
        background-image: url('./image/step_state_icon3.png');
    }

    75% {
        background-image: url('./image/step_state_icon1.png');
    }

    100% {
        background-image: url('./image/step_state_icon3.png');
    }
}

@keyframes delayContentFrame {
    0% {
        top: 47%;
    }

    50% {
        top: 53%;
    }

    100% {
        top: 47%
    }
}

.delayImage {
    display: block;
    position: absolute;
}

.icon1 {
    left: 119px;
    top: 12px;
    width: 59px;
    height: 49px;
    animation: icon1 infinite 5s linear;
}

@keyframes icon1 {
    0% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(-6px);
    }
}

.icon2 {
    left: 186px;
    top: 18px;
    width: 34px;
    height: 42px;
    animation: icon3 infinite 1.5s linear;
}

.icon3 {
    left: 167px;
    top: 66px;
    width: 12px;
    height: 12px;
    animation: icon3 infinite 2s linear;
}

@keyframes icon3 {
    0% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.3);
    }
}

.icon4 {
    left: 108px;
    top: 97px;
    width: 49px;
    height: 50px;
    animation: icon3 infinite 2s 1s linear;
}

.icon5 {
    left: -20px;
    top: 148px;
    width: 106px;
    height: 55px;
}

.icon6 {
    left: 53px;
    top: 0px;
    width: 84px;
    height: 118px;
    animation: icon6 2s linear infinite;
}

@keyframes icon6 {
    100% {
        transform: translate(-30vw, 50vh);
        opacity: .5;
    }
}

.icon7 {
    right: 72px;
    top: -40px;
    width: 50px;
    height: 40px;
    animation: icon7 12s linear 2s infinite;
}

@keyframes icon7 {
    100% {
        transform: translate(-70vw, 120vh);
    }
}

.icon8 {
    right: -37px;
    top: 0;
    width: 37px;
    height: 31px;
    animation: icon8 8s linear infinite;
}

@keyframes icon8 {
    100% {
        transform: translate(-70vw, 100vh);
    }
}

.icon9 {
    right: -11px;
    top: 19px;
    width: 84px;
    height: 118px;
    animation: icon9 2s linear infinite;
}

@keyframes icon9 {
    100% {
        transform: translate(-30vw, 50vh);
        opacity: .5;
    }
}

.icon10 {
    right: 7px;
    top: 55px;
    width: 27px;
    height: 22px;
}

.icon11 {
    right: -30px;
    top: 136px;
    width: 102px;
    height: 106px;
    transform-style: preserve-3d;
    animation: icon11 60s linear infinite;
}

@keyframes icon11 {
    100% {
        transform: rotate(360deg);
    }
}

.icon12 {
    left: 0;
    top: 0;
    width: 100%;
}

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }

    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }

    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }

    45% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}
@keyframes iconDuihuaScale {
    0% {
        transform: scale(.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}