css3 列表按先后顺序移动过来显示
要实现列表按先后顺序平移过来,可以使用CSS动画结合:nth-child()
选择器。以下是一个简单的示例:
HTML:
<ul class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
CSS:
.list li { opacity: 0; animation: slide-in 0.5s forwards; } @keyframes slide-in { 0% { opacity: 0; transform: translate(300px, -100px); } 100% { opacity: 1; transform: translate(0, 0); } } .list li:nth-child(1) { animation-delay: 0.5s; } .list li:nth-child(2) { animation-delay: 1s; } .list li:nth-child(3) { animation-delay: 1.5s; } .list li:nth-child(4) { animation-delay: 2s; }
在这个例子中,列表中的每个<li>
元素在进入时都会以X轴移动300px,Y轴-100px来进行移动(可以根据自己的情况调整方向),然后逐个动画延迟0.5秒开始显示,最终位置不再平移。您可以根据需要调整动画持续时间(0.5s
)和延迟(0.5s
的增量)。