css上下滚动效果

<div class="scroll-container">
    <div class="scroll-content">
        <p>滚动内容1</p>
        <p>滚动内容2</p>
        <p>滚动内容3</p>
        <!-- 更多内容 -->
    </div>
</div>

.scroll-container {
    width: 100%;
    height: 200px; /* 设置固定高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative;
}

.scroll-content {
    animation: scroll-up 15s linear infinite; /* 动画效果 */
}

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

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

.scroll-container {
    overflow: hidden;
}

.scroll-content {
    -webkit-animation: scroll-up 15s linear infinite; /* Safari 和 Chrome */
    animation: scroll-up 15s linear infinite;
}