CSS3 animation 实现无限循环滚动
内容区域重复一份,使用 animation 平移,平移结束后瞬间切回原始状态。达到无线循环滚动的效果。
预览
实现
<div class="father">
<div class="son">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
<div class="son">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>
</div>
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -120px, 0);
transform: translate3d(0, -120px, 0);
}
}
.father {
height: 120px;
overflow: hidden;
border: 1px solid #000;
}
.son {
height: 120px;
border: 1px solid #000;
box-sizing: border-box;
-webkit-animation: 2s rowup linear infinite normal;
animation: 2s rowup linear infinite normal;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步