Animasi Pokok Krismas menggunakan html css dan kod js-tutorial js-php.cn

Animasi Pokok Krismas menggunakan html css dan kod js

Mary-Kate Olsen

Lepaskan： 2024-12-27 22:16:11

asal

915 orang telah melayarinya

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>

Salin selepas log masuk

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!