Bagaimana untuk membuat garis masa animasi CSS sahaja?

Untuk membuat garis masa animasi CSS sahaja, anda perlu terlebih dahulu membina struktur HTML semantik, dan setiap peristiwa diwakili oleh div yang mengandungi titik dan kandungan; 2. Gunakan susun atur flexbox dan unsur-unsur pseudo untuk membuat garis menegak yang berpusat, dan gunakan @keyframes untuk menentukan animasi Fadeinup untuk mencapai paparan bawah ke atas; 3. Gunakan Animasi-Delay untuk mencapai kesan kemasukan yang melengkapkan, dan secara pilihan menambah penjajaran kandungan berselang di kiri dan kanan; 4. Penambahbaikan pilihan termasuk menggunakan animasi drawline untuk mensimulasikan proses lukisan garis, kesan hover dan penyesuaian responsif; 5. Titik utama termasuk menggunakan kelegapan dan transformasi untuk memastikan prestasi animasi, mengamalkan tag semantik dan susun atur mudah alih. Akhirnya melaksanakan lancar, mudah diakses dan mudah untuk menyesuaikan garis masa tanpa JavaScript.

Mewujudkan garis masa animasi CSS sahaja adalah cara yang baik untuk mempamerkan acara, tonggak utama, atau langkah-langkah dalam cara yang menarik secara visual-tanpa memerlukan JavaScript. Berikut adalah cara anda boleh membina satu menggunakan hanya HTML dan CSS, dengan animasi yang lancar dan susun atur yang bersih.

1. Struktur markup HTML

Mulakan dengan struktur HTML semantik dan mudah. Setiap acara garis masa masuk ke dalam item senarai, menjadikannya mudah untuk gaya dan bernyawa.

 <div class = "Timeline">
  <div class = "Timeline-item">
    <div class = "Timeline-dot"> </div>
    <div class = "content timeline">
      <h3> Acara satu </h3>
      <p> Januari 2023 </p>
      <p> Ini adalah peristiwa penting dalam garis masa. </P>
    </div>
  </div>

  <div class = "Timeline-item">
    <div class = "Timeline-dot"> </div>
    <div class = "content timeline">
      <h3> Acara Dua </h3>
      <p> Mac 2023 </p>
      <p> Acara utama kedua dengan maklumat lanjut. </P>
    </div>
  </div>

  <div class = "Timeline-item">
    <div class = "Timeline-dot"> </div>
    <div class = "content timeline">
      <h3> Acara Tiga </h3>
      <p> Jun 2023 </p>
      <p> peristiwa terakhir dalam garis masa contoh ini. </P>
    </div>
  </div>
</div>

2. Gaya garis masa dengan CSS

Sekarang gunakan gaya untuk membuat garis menegak, letakkan titik -titik, dan menyelaraskan kandungan. Kami akan menggunakan Flexbox untuk susun atur dan @keyframes untuk animasi.

 .Timeline {
  Kedudukan: Relatif;
  Max-Width: 800px;
  Margin: 40px Auto;
  Padding: 20px 0;
}

/ * Garis menegak di tengah */
.Timeline :: Sebelum {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Bawah: 0;
  lebar: 4px;
  Latar Belakang: #007BFF;
  Kiri: 50%;
  Transform: TranslateX (-50%);
}

.Timeline-item {
  Paparan: Flex;
  Justify-Content: flex-start;
  Margin-Bottom: 50px;
  Kelegapan: 0;
  Transform: Translate (30px);
  Animasi: Fadeinup 0.8s ke hadapan;
}

/ * Kelewatan animasi mengimbangi untuk setiap item */
.Timeline-item: nth-child (1) {animation-delay: 0.3s; }
.Timeline-item: nth-child (2) {animation-delay: 0.6s; }
.Timeline-item: nth-child (3) {animation-delay: 0.9s; }

/ * Timeline Dot */
.Timeline-dot {
  lebar: 20px;
  Ketinggian: 20px;
  Latar Belakang: #007BFF;
  Sempadan: 4px pepejal #ffff;
  Radius sempadan: 50%;
  box-shadow: 0 0 0 3px #007BFF40;
  Margin: 0 20px;
  Align-diri: pusat;
}

/ * Kotak kandungan */
.Timeline-Content {
  Flex: 1;
  Padding: 20px;
  Latar Belakang: #F9F9F9;
  Radius sempadan: 8px;
  Box-shadow: 0 2px 10px RGBA (0,0,0,0.1);
  Max-Width: 350px;
}

.Timeline-Content H3 {
  Margin: 0 0 10px;
  Warna: #333;
}

.Timeline-Content P {
  Margin: 5px 0;
  Warna: #666;
  saiz font: 0.9EM;
}

/ * Untuk berselang -seli (pilihan) */
.Timeline-item: nth-child (ganjil) .Mimeline-Content {
  Align-diri: flex-end;
}

.Timeline-item: nth-child (walaupun) .Mimeline-Content {
  Align-diri: flex-start;
}

/ * Frame keyrame animasi */
@KeyFrames Fadeinup {
  ke {
    Kelegapan: 1;
    Transform: Translate (0);
  }
}

3. Penambahbaikan pilihan

Anda boleh membuat garis masa lebih dinamik dengan beberapa tweak:

• Animate lukisan garis : Gunakan elemen pseudo dengan animasi height .
• Tambah kesan hover : Skala titik atau angkat kad pada hover.
• Susun atur responsif : Pada skrin kecil, tumpukan segala -galanya secara menegak.

Contoh: Animasi garis yang diambil dari atas ke bawah:

 .Timeline :: Selepas {
  Kandungan: '';
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 50%;
  Transform: TranslateX (-50%);
  lebar: 4px;
  Latar Belakang: #007BFF;
  ketinggian: 0;
  Animasi: Drawline 1s Ease-Out Forwards;
}

@KeyFrames Drawline {
  ke {
    Ketinggian: 100%;
  }
}

4. Mata Utama untuk Diingati

• Gunakan opacity dan transform untuk animasi yang lancar, pelukis.
• Stagger animation-delay untuk mewujudkan kesan cascading.
• Simpan struktur semantik- <ol></ol> atau <ul></ul> juga boleh digunakan dan bukannya div s.
• Ujian di Mobile: Pertimbangkan beralih ke susun atur satu lajur menggunakan pertanyaan media.

Pada asasnya, garis masa animasi CSS hanya turun untuk menggabungkan teknik susun atur (flexbox, kedudukan), elemen pseudo untuk garis, dan animasi halus untuk membawanya ke kehidupan. Tiada JavaScript diperlukan, dan ia cepat, boleh diakses, dan mudah disesuaikan.

Atas ialah kandungan terperinci Bagaimana untuk membuat garis masa animasi CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!