Animasi Matryoshka Dolls di CSS

Kesan animasi anak patung Rusia yang dicipta oleh CSS tulen! Artikel ini akan membawa anda untuk merealisasikan langkah animasi CSS yang menarik demi langkah, mensimulasikan kesan pembukaan lapisan anak patung Rusia dengan lapisan, dan menggunakan bear codepen untuk menggantikan imej anak patung tradisional. Tiada JavaScript diperlukan, semua fungsi interaktif dapat dicapai menggunakan CSS sahaja.

Artikel ini akan menerangkan secara terperinci bagaimana menggunakan CSS untuk mencapai kesan animasi yang sejuk ini, termasuk pembinaan struktur HTML, mekanisme animasi CSS teras dan pengindahan gaya muktamad.

Pertama sekali, kita tidak meneruskan kecantikan, kita mula -mula membina struktur HTML dan merealisasikan interaksi asas. Untuk menetapkan semula mudah, kami membungkus keseluruhan adegan animasi dalam bentuk HTML, menggunakan<input type="reset"> Melaksanakan fungsi reset bebas JavaScript. Kami akan menggunakan helah kotak semak dan tag bentuk yang berkaitan untuk membuat hierarki anak patung. Berikut adalah contoh menggunakan bahasa PUG Template, dan sudah tentu anda juga boleh menulis HTML secara manual:

Tetapkan semula

Seterusnya, kita perlu menentukan gaya dan logik interaksi anak patung (atau beruang). Matlamatnya ialah:

1. Hanya satu kotak semak yang dipaparkan pada satu masa.
2. Klik kotak semak untuk memaparkan label kotak semak seterusnya.
3. Hanya borang yang boleh ditetapkan semula apabila kotak semak paling dalam dicapai.

Ini memerlukan penggunaan pemilih saudara bersebelahan CSS ().

 Input: Label Input Label Ditambah {
  paparan: blok;
}

Untuk memaparkan tag pertama, kami boleh menambah style="display: block;" dalam html.

Walau bagaimanapun, tag terakhir tidak mempunyai kotak semak yang berkaitan, jadi peraturan tambahan diperlukan:

 Input: Label Input Label Ditambah,
Input: Label Label yang Daftar {
  paparan: blok;
}

Ini melaksanakan interaksi asas, diikuti oleh bahagian animasi yang lebih kompleks.

Gaya asas

Pertama, kami membuat beberapa kotak mudah untuk mewakili anak patung dan melakukan gaya asas:

 .doll {
  / * ... gaya ... */
}

Mengklik pada anak patung akan segera memaparkan yang seterusnya. Selepas mencapai anak patung terakhir, anda boleh menetapkan semula borang dan memulakan semula.

Mekanisme animasi

Kami akan animasi berdasarkan titik tengah. Langkah Animasi:

1. Anak patung semasa slaid ke kiri.
2. Buka anak patung dan paparkan yang seterusnya.
3. Gerakkan anak patung seterusnya ke kedudukan permulaan anak patung semasa.
4. Anak patung semasa memudar.
5. Tetapkan anak patung seterusnya sebagai anak patung semasa.

Kami menggunakan pembolehubah CSS untuk mengawal kelajuan dan tingkah laku animasi. Pertama, biarkan anak patung semasa meluncur ke kiri:

 : root {
  -kelajuan: 0.25;
  --base-slaid: 100;
  -jarak jauh: 60;
}

Input: Label diperiksa {
  Animasi: slideleft calc (var (-kelajuan) * 1s) ke hadapan;
  Pointer-events: Tiada; /* Mencegah klik berulang*/
}

@KeyFrames slideleft {
  ke {
    Transform: Translate (Calc ((Var (-Base-Slide) * -1px) var (-Slide-Distance) * -1%), 0);
  }
}

Untuk mengelakkan klik berulang, kami menambah pointer-events: none; .

Seterusnya, kita perlu menghidupkan anak patung untuk menunjukkan yang seterusnya. Ini memerlukan beberapa elemen tambahan untuk mensimulasikan kesan pembukaan dan kelewatan memaparkan tab seterusnya. Kami akan menggunakan elemen span untuk membuat anak patung "palsu" dan menggantikannya dengan anak patung sebenar selepas animasi berakhir.

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

Kemudian terdapat animasi anak patung @keyframes , termasuk pembukaan penutup, animation-delay boneka animation-fill-mode , dan sebagainya. Akhirnya, dengan menyesuaikan saiz dan gaya anak patung, dan menambah beberapa animasi terperinci, seperti kesan pudar, anda dapat menyelesaikan animasi seluruh anak patung Rusia. Kod lengkap boleh didapati di Codepen.

Melalui langkah -langkah di atas, kami telah menggunakan CSS untuk mencapai kesan animasi anak patung Rusia yang menarik ini. Semoga artikel ini membantu anda memahami dan menguasai kemahiran.

Atas ialah kandungan terperinci Animasi Matryoshka Dolls di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!