.no-scrollbar {
    /* 去掉滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 去掉滚动条后需要自定义样式 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

* {
    margin: 0;
    padding: 0;
}

.wrap {
    background: #000000;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: linear-gradient(40deg, #f9fabe, #fffd3b);
    position: absolute;
    top: 10%;
    left: 50%;
    box-shadow: 0 0 30px 0px #fffd3b, 0 0 80px 0 #ffffff;
    animation: moonflashing 3s linear infinite;
}

@keyframes moonflashing {
    0% {
        filter: brightness(0.8);
    }

    50% {
        filter: brightness(1.3);
    }

    100% {
        filter: brightness(0.8);
    }
}

@keyframes starflashing {
    0% {
        filter: brightness(0.3);
    }

    50% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(0.3);
    }
}

.star {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    animation: starflashing 2s infinite;
}

.star1 {
    top: 50%;
    right: 20%;
}

.star2 {
    top: 70%;
    right: 30%;
}

.star3 {
    top: 40%;
    left: 20%;
}

.star4 {
    top: 60%;
    right: 10%;
}

.star5 {
    top: 55%;
    right: 44%;
}

.star6 {
    top: 10%;
    left: 30%;
}

.star7 {
    top: 15%;
    left: 20%;
}

.star8 {
    top: 66%;
    left: 20%;
}

.star9 {
    top: 50%;
    left: 50%;
}

.star10 {
    top: 0%;
    left: 0%;
}

.meteor {
    position: absolute;
    width: 4px;
    height: 4px;
    opacity: 0;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px #636262;
}

.meteor:after {
    content: "";
    display: block;
    border: 0px solid #fff;
    border-width: 2px 100px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
    transform: rotate(-45deg) translate3d(1px, 1px, 0);
    transform-origin: 0% 0%;
}

.meteor1 {
    top: 2vh;
    left: 5vw;
    border:1px solid;
    animation: meteorflashing 2s infinite linear 1s;
}

.meteor2 {
    top: 22vh;
    left: 80vw;
    background: rgb(234, 0, 255);
    animation: meteorflashing 2s infinite linear 1s;
}

.meteor3 {
    top: 30vh;
    left: 40vw;
    animation: meteorflashing 3s infinite linear 2s;
}

.meteor4 {
    top: 10vh;
    left: 50vw;
    animation: meteorflashing 3s infinite linear 1s;
}

.meteor5 {
    top: 50vh;
    right: 2vw;
    animation: meteorflashing 3s infinite linear 3s;
}

@keyframes meteorflashing {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1) translate3d(-200px, 200px, 0);
    }

    100% {
        opacity: 0;
        transform: scale(1) translate3d(-500px, 500px, 0);
    }
}




@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes scale {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) translateY(-50%) scale(1.2);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

/* 向上飞 exit */
.slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.slide-out-top-2 {
    -webkit-animation: slide-out-top-2 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-top-2 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-top-2 {
    0% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-1000px);
        transform: translateX(-50%) translateY(-1000px);
        opacity: 0;
    }
}

/* 向下飞 进入 */
.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-top-2 {
    -webkit-animation: slide-in-top-2 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top-2 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top-2 {
    0% {
        -webkit-transform: translateX(-50%) translateY(-1000px);
        transform: translateX(-50%) translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}




/* 向左离开 */
.slide-out-left {
    -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
}

/* 从左进入 */
.slide-in-left {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}



/* 左右摇晃 */

.wobble-hor-bottom {
    -webkit-animation: wobble-hor-bottom 3s ease-in-out infinite normal both;
    animation: wobble-hor-bottom 3s ease-in-out infinite normal both;
}

@keyframes wobble-hor-bottom {

    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

/* 闪闪发光 */
.blink-1 {
    -webkit-animation: blink-1 3s ease-in-out infinite both;
    animation: blink-1 3s ease-in-out infinite both;
}

.blink-2 {
    -webkit-animation: blink-1 3s ease-in-out infinite both;
    animation: blink-1 3s ease-in-out infinite both;
    animation-delay: 0.5s;
}

@keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
        transform: scale(1.1);
    }

    25%,
    75% {
        opacity: 0.8;
        transform: scale(0.9);
    }

}

/* 左右移动 */

.moveLeftOrRight {
    animation: move 2s infinite ease-in-out;
}

.moveLeftOrRightRe {
    animation: move2 2s infinite ease-in-out;
}

@keyframes move {
    0% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(-5px);
    }
}

@keyframes move2 {
    0% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(5px);
    }
}

.op-close {
    -webkit-animation: op-close 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: op-close 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.op-enter {
    -webkit-animation: op-enter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: op-enter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes op-close {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes op-enter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.8;
    }
}

.glow {
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        transform: scale(1);
        opacity: 0.5;
    }

    to {
        transform: scale(1.01);
        opacity: 1;
    }
}

.glowing {
    animation: glowing 1s ease-in-out infinite alternate;
}

.glowing2 {
    animation: glowing 1s ease-in-out 0.2s infinite alternate;
}

.glowing3 {
    animation: glowing 1s ease-in-out 0.3s infinite alternate;
}

.glowing4 {
    animation: glowing 1s ease-in-out 0.4s infinite alternate;
}

@keyframes glowing {
    0% {
        box-shadow: 0px 0px 2px rgba(249, 199, 79, 0.8);
    }

    30% {
        box-shadow: 0px 0px 50px rgba(249, 199, 79, 0.8);
    }

    60% {
        box-shadow: 0px 0px 2px rgba(249, 199, 79, 0.8);
    }

    100% {
        box-shadow: 0px 0px 2px rgba(249, 199, 79, 0.8);
    }
}


/* 铃铛 */
.shake-top {
    -webkit-animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-top {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shine {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.7);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

.element {
    animation: shine 2s infinite;
}

.kenburns-top-box {
    animation: kenburns-top 5s ease-in-out infinite alternate both;
}
@keyframes kenburns-top {
    0% {
        transform: scale(1) translateY(0);
        transform-origin: 50% 45%;
    }

    100% {
        transform: scale(1.05) translateY(-15px);
        transform-origin: 50% 50%;
    }
}