.vertical-scroll-news {
    height: 60px; /* 单条新闻高度 */
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 15px;
    margin:0 auto;
}

.news-list {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: scroll-up 20s infinite; /* 4条新闻 × 3秒 = 12秒 */
}

.news-item {
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:18px;
}

.vertical-scroll-news:hover .news-list {
    animation-play-state: paused;
}

@keyframes scroll-up {
    0%, 20% {
        transform: translateY(0);
    }

    25%, 45% {
        transform: translateY(-60px); /* 上移一条新闻的高度 */
    }

    50%, 70% {
        transform: translateY(-120px); /* 上移两条新闻的高度 */
    }

    75%, 95% {
        transform: translateY(-180px); /* 上移三条新闻的高度 */
    }

    100% {
        transform: translateY(-240px); /* 回到初始位置(因为有重复第一条) */
    }
}