要在每行滚动时停留2秒,可以使用 CSS 的 animation-delay
属性来控制每一行的动画延迟。你需要调整现有的动画,使得每一行在滚动完成后能够停留 2 秒。以下是一个可能的实现:
.centers, .lefts {
position: absolute;
left: 6px;
bottom: -100%; /* 初始位置在容器下方 */
animation: scroll-up 4s linear infinite; /* 动画时间调整为4秒 */
}
.centeres {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
margin-left: 4px !important;
}
/* 新增关键帧来创建停留效果 */
@keyframes scroll-up {
0% {
bottom: -100%; /* 从下方开始 */
}
25% {
bottom: 0; /* 到达顶部位置 */
}
75% {
bottom: 0; /* 停留在顶部位置 */
}
100% {
bottom: 100%; /* 滚动到上方外部 */
}
}
修改说明:
- 将动画总时长设为
4s
(2秒滚动 + 2秒停留)。 - 在关键帧中,设置
25%
和75%
的位置分别为bottom: 0
,这样可以让文本先向上滚动,然后停留在顶部,直到最后再向上移出视口。
根据你的需求,你可能还需要调节具体的时间和比例,以达到理想效果。如果你想让多个元素依次出现,可以考虑给不同的 .centers
或 .lefts
元素添加不同的动画延迟。
内容由零声教学AI助手提供,问题来源于学员提问