body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f6fff6;
    margin: 0;
    font-family: Arial, sans-serif;
}

.wave-text {
    font-size: 48px;
    color: #000;
    display: inline-block;
    animation: wave-animation 4s infinite;
}

/*.text{*/
/*    width: 1060px;*/
/*    height: 420px;*/
/*    margin-top: 350px;*/
/*    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);*/
/*    -webkit-text-fill-color: transparent;*/
/*    -webkit-background-clip: text;*/
/*    -webkit-background-size: 200% 100%;*/
/*    -webkit-animation: masked-animation 4s linear infinite;*/
/*    font-size: 33px;*/
/*    line-height: 42px;*/
/*    text-align: center;*/
/*}*/

/*.lightning {*/
/*    !* 重置所有继承样式 *!*/
/*    position: absolute;*/
/*    margin-top: 350px;*/
/*}*/

.text-container {
    margin-top: 300px;
    font-size: 30px;
    line-height: 66px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gradient-text {
    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
    font-size: 30px;
}

.lightning {
    /* 重置闪电符号的样式，避免继承文本渐变 */
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    margin-right: 1px; /* 与文字保持适当距离 */
}

@media screen and (max-width: 500px) {
    .text-container {
        margin-top: 240px;
        font-size: 18px;
        line-height: 60px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gradient-text {
        background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 18px;
    }
}

@keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
}

@keyframes wave-animation {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/*.wave-text span {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    animation: textWave 5s infinite;*/
/*}*/

@keyframes textWave {
    0%, 100% {
        transform: translateY(-40px);
    }
    25% {
        transform: translateY(-42px);
    }
    75% {
        transform: translateY(42px);
    }
}