

.shipping-flow-bar {

    width:100%;
    height:50px;

    background:#181818;

    overflow:hidden;

    position:relative;

    display:flex;

    align-items:center;

}



/* 冰川蓝流动水波 */

.shipping-flow-bar::before {

    content:"";

    position:absolute;

    width:220%;
    height:180%;


    left:-60%;
    top:-40%;


    background:

    radial-gradient(
        ellipse,
        rgba(0,200,255,0.55) 0%,
        rgba(0,200,255,0.25) 30%,
        rgba(0,200,255,0.08) 50%,
        transparent 75%
    );


    filter:blur(20px);


    animation:
    waterFlow 9s ease-in-out infinite;

}




.shipping-flow-bar::after {

    content:"";


    position:absolute;


    width:160%;
    height:100%;


    left:-80%;


    background:

    linear-gradient(
        120deg,
        transparent 20%,
        rgba(150,230,255,0.45),
        transparent 60%
    );


    animation:
    lightMove 5s linear infinite;


}





@keyframes waterFlow {


0%{

transform:translateX(-15%) translateY(0);

}


50%{

transform:translateX(15%) translateY(8%);

}


100%{

transform:translateX(-15%) translateY(0);

}


}




@keyframes lightMove {


0%{

transform:translateX(-100%);

}


100%{

transform:translateX(100%);

}


}



/* 无限循环滚动 */

.shipping-track {


display:flex;


width:max-content;


animation:

scrollText 30s linear infinite;


position:relative;

z-index:5;


}





@keyframes scrollText {


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}




.shipping-group {


display:flex;

align-items:center;


white-space:nowrap;


}





.shipping-item {


display:flex;

align-items:center;


margin-right:55px;


font-size:15px;


font-weight:600;


letter-spacing:.5px;


color:#ffffff;


text-shadow:

0 0 8px rgba(255,255,255,.25);


}





/* 跳动闹钟 */

.clock-icon {


font-size:22px;


margin-right:10px;


animation:

clockMove 1.2s infinite;


}




@keyframes clockMove {


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-4px);

}


}




/* 手机适配 */

@media(max-width:768px){


.shipping-flow-bar{

height:45px;

}


.shipping-item{


font-size:13px;


margin-right:45px;


}


.clock-icon{

font-size:19px;

}


.shipping-track{


animation-duration:25s;


}



}



