cari

Rumah >hujung hadapan web >tutorial js >Animasi Pokok Krismas menggunakan html css dan kod js

Animasi Pokok Krismas menggunakan html css dan kod js

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-27 22:16:11977semak imbas

Christmas Tree animation using html css and js code

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokok Krismas 3D</title>
  <gaya>
    badan {
      paparan: flex;
      justify-content: pusat;
      align-item: tengah;
      ketinggian: 100vh;
      margin: 0;
      warna latar belakang: #000;
      perspektif: 1000px; /* Tambahkan perspektif ke tempat kejadian */
    }
    .pokok {
      kedudukan: relatif;
      transform-style: preserve-3d; /* Pastikan kanak-kanak dipaparkan dalam ruang 3D */
      transform: rotateX(30deg); /* Putar pokok untuk menghadap arah yang betul */
    }
    .bintang {
      jawatan: mutlak;
      saiz fon: 12px;
      kelegapan: 0;
      animasi: kelipan 1s silih berganti, muncul 5s ke hadapan;
    }
    @keyframes berkelip {
      daripada { kelegapan: 1; }
      kepada { kelegapan: 0.5; }
    }
    @keyframes muncul {
      daripada { kelegapan: 0; }
      kepada { kelegapan: 1; }
    }
  </style>
</head>
<badan>
  <div>

Atas ialah kandungan terperinci Animasi Pokok Krismas menggunakan html css dan kod js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html using JS display position margin viewport background transform animation flex
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Boleh Mengurus Kelas Elemen Secara Dinamik dalam JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Mengurus Kelas Elemen Secara Dinamik dalam JavaScript?

Artikel berkaitan

Lihat lagi