css3 列表按先後順序移動過來顯示

维维WW發表於2024-07-03
CSSS3

要實現列表按先後順序平移過來，可以使用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的增量)。

相關文章