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中文网其他相关文章！