CSS中的動畫Matryoshka娃娃

純CSS打造的俄羅斯套娃動畫效果！本文將帶您一步步實現一個有趣的CSS動畫，模擬俄羅斯套娃層層打開的效果，並用CodePen小熊代替傳統的套娃形象。無需任何JavaScript，僅使用CSS即可完成所有交互功能。

本文將詳細講解如何利用CSS實現這個酷炫的動畫效果，包括HTML結構搭建、核心CSS動畫機制以及最終的樣式美化。

首先，我們不追求美觀，先搭建HTML結構並實現基本交互。為了方便重置，我們將整個動畫場景包裹在一個HTML表單中，利用<input type="reset">實現無JavaScript的重置功能。 我們將使用複選框技巧和關聯的表單標籤來創建套娃的層級結構。以下是一個使用Pug模板語言的示例，當然您也可以手動編寫HTML：

Reset

接下來，我們需要定義套娃（或小熊）的樣式和交互邏輯。目標是：

1. 每次只顯示一個複選框。
2. 點擊複選框，顯示下一個複選框的標籤。
3. 達到最內層複選框時，只能重置表單。

這需要用到CSS相鄰兄弟選擇器( )。

 input:checked label input label {
  display: block;
}

為了顯示第一個標籤，我們可以在HTML中直接添加style="display: block;" 。

然而，最後一個標籤沒有關聯的複選框，因此需要額外規則：

 input:checked label input label,
input:checked label label {
  display: block;
}

這實現了基本的交互，接下來是更複雜的動畫部分。

基礎樣式

首先，我們創建一些簡單的盒子來代表套娃，並進行基礎樣式設置：

 .doll {
  /* ...樣式... */
}

點擊一個套娃會立即顯示下一個，到達最後一個套娃後，可以重置表單重新開始。

動畫機制

我們將基於中心點進行動畫。動畫步驟：

1. 當前套娃向左滑動。
2. 打開套娃，顯示下一個。
3. 將下一個套娃移動到當前套娃的起始位置。
4. 當前套娃淡出。
5. 將下一個套娃設為當前套娃。

我們使用CSS變量來控制動畫速度和行為。首先，讓當前套娃向左滑動：

 :root {
  --speed: 0.25;
  --base-slide: 100;
  --slide-distance: 60;
}

input:checked label {
  animation: slideLeft calc(var(--speed) * 1s) forwards;
  pointer-events: none; /* 防止重複點擊*/
}

@keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1px) var(--slide-distance) * -1%), 0);
  }
}

為了避免重複點擊，我們添加了pointer-events: none; 。

接下來，我們需要打開套娃來顯示下一個。這需要一些額外的元素來模擬打開效果，並延遲顯示下一個標籤。 我們將使用span元素來創建“假”套娃，並在動畫結束後替換成真實的套娃。

<label for="doll--1">
  <span class="doll__half doll__half--top"></span>
  <span class="doll__half doll__half--bottom"></span>
</label>

然後是套娃的動畫，包括蓋子打開、內部套娃移動等，這裡使用多個@keyframes動畫和CSS變量來控制動畫細節，並利用animation-delay和animation-fill-mode來精確控制動畫時間和狀態。最終，通過調整套娃的大小和样式，以及添加一些細節動畫，例如淡出效果，就能完成整個俄羅斯套娃的動畫效果。 完整的代碼可以在CodePen上找到。

通過以上步驟，我們利用CSS實現了這個充滿趣味的俄羅斯套娃動畫效果。 希望本文能夠幫助您理解並掌握其中的技巧。

以上是CSS中的動畫Matryoshka娃娃的詳細內容。更多資訊請關注PHP中文網其他相關文章！