CSSのアニメーションMatryoshka人形

純粋なCSSによって作成されたロシアの人形アニメーション効果！この記事では、興味深いCSSアニメーションを段階的に実現し、レイヤーごとにロシアの人形を開く効果をシミュレートし、Codepen Bearsを使用して従来の人形の画像を置き換えます。 JavaScriptは必要ありません。すべてのインタラクティブな関数は、CSSだけを使用して達成できます。

この記事では、HTML構造構造、コアCSSアニメーションメカニズム、究極のスタイルの美化など、このクールなアニメーション効果を実現するためにCSSを使用する方法を詳細に説明します。

まず第一に、私たちは美しさを追求するのではなく、最初にHTML構造を構築し、基本的な相互作用を実現します。簡単にリセットするために、アニメーションシーン全体をHTMLフォームでラップします。<input type="reset"> JavaScriptを含まないリセット機能を実装します。チェックボックスのトリックと関連フォームタグを使用して、人形の階層を作成します。 Pug Template Languageを使用した例を以下に示します。もちろん、HTMLを手動で書くこともできます。

リセット

次に、人形（または熊）のスタイルと相互作用ロジックを定義する必要があります。目標は次のとおりです。

1. 一度に1つのチェックボックスのみが表示されます。
2. チェックボックスをクリックして、次のチェックボックスのラベルを表示します。
3. 最も内側のチェックボックスに到達すると、フォームのみをリセットできます。

これには、CSS隣接する兄弟セレクター（）を使用する必要があります。

入力：チェックラベル入力ラベル{
  表示：ブロック;
}

最初のタグを表示するには、 style="display: block;"直接追加できます。 HTMLで。

ただし、最後のタグには関連するチェックボックスがないため、追加のルールが必要です。

入力：チェックラベル入力ラベル、
入力：チェックラベルラベル{
  表示：ブロック;
}

これにより、基本的な相互作用が実装され、より複雑なアニメーションパーツが続きます。

基本的なスタイル

まず、人形を表すためにいくつかの簡単なボックスを作成し、基本的なスタイルを実行します。

 。人形 {
  / * ...スタイル... */
}

人形をクリックすると、すぐに次のものが表示されます。最後の人形に到達した後、フォームをリセットしてやり直すことができます。

アニメーションメカニズム

中心点に基づいてアニメーションを行います。アニメーションの手順：

1. 現在の人形は左にスライドします。
2. 人形を開けて、次の人形を表示します。
3. 次の人形を現在の人形の開始位置に移動します。
4. 現在の人形はフェードアウトします。
5. 次の人形を現在の人形として設定します。

CSS変数を使用して、アニメーションの速度と動作を制御します。まず、現在の人形を左にスライドさせます。

 ：根 {
   - スピード：0.25;
   - ベーススライド：100;
   - スライドダイスタンス：60;
}

入力：チェックラベル{
  アニメーション：slideleft calc（var（ -  speed） * 1s）フォワード;
  ポインターイベント：なし; /*繰り返しのクリックを防ぐ*/
}

@keyframes slideleft {
  に {
    変換：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 中国語 Web サイトの他の関連記事を参照してください。