Guru Nanak dev ji Jayanti animasi khas menggunakan html css dan kod javascript-tutorial js-php.cn

Guru Nanak dev ji Jayanti animasi khas menggunakan html css dan kod javascript

Mary-Kate Olsen

Lepaskan： 2024-11-26 04:56:14

asal

225 orang telah melayarinya

Guru Nanak dev ji Jayanti special animation using html css and javascript code

<!DOCTYPE html>
<html lang="en">
<kepala>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <tajuk>Guru Nanak Jayanti Animasi</title>
    <gaya>
        badan {
            latar belakang: kecerunan linear(135deg, #ffeb3b, #f57f17);
            paparan: flex;
            justify-content: pusat;
            align-item: tengah;
            ketinggian: 100vh;
            limpahan: tersembunyi;
            margin: 0;
            font-family: 'Poppins', sans-serif;
            kedudukan: relatif;
        }
        .bekas {
            text-align: tengah;
            warna: #fff;
            animasi: fadeIn 2s kemudahan-keluar;
        }
        .container img {
            lebar: 200px;
            ketinggian: auto;
            margin-bawah: 10px;
            animasi: bercahaya 2s silih berganti;
        }
        h1 {
            saiz fon: 2rem;
            bayang teks: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        .ajaran {
            jidar atas: 20px;
            paparan: flex;
        }
        .kotak pengajaran {
            lebar: 160px;
            ketinggian: 100px;
            margin: 10px auto;
            padding: 15px;
            latar belakang: #333;
            jejari sempadan: 12px;
            bayang-kotak: 0 4px 15px rgba(0, 0, 0, 0.2);
            kelegapan: 0;
            transform: translateY(50px);
            animasi: slideUp 1.5s ke hadapan;
        }
        .kotak pengajaran:anak-anak(1) {
            latar belakang: #ff7043; /* Oren */
            kelewatan animasi: 0.5s;
        }
        .kotak-ajaran:anak-anak(2) {
            latar belakang: #42a5f5; /* Biru */
            kelewatan animasi: 1s;
        }
        .kotak pengajaran:kanak-kanak ke-3(3) {
            latar belakang: #66bb6a; /* Hijau */
            kelewatan animasi: 1.5s;
        }
        .tajuk-tajuk {
            saiz fon: 1.4rem;
            font-weight: tebal;
            jidar bawah: 5px;
        }
        .subteks pengajaran {
            saiz fon: 1rem;
        }
        .bunga {
            jawatan: mutlak;
            atas: -50px;
            lebar: 100%;
            ketinggian: 100%;
            pointer-events: tiada;
            paparan: flex;
            flex-wrap: bungkus;
        }
        .bunga {
            jawatan: mutlak;
            saiz fon: 30px;
            animasi: jatuh linear tak terhingga;
        }
        @keyframes jatuh {
            daripada { transform: translateY(-100vh) rotate(0deg); }
            kepada { transform: translateY(100vh) rotate(360deg); }
        }
        @keyframes fadeIn {
            daripada { kelegapan: 0; }
            kepada { kelegapan: 1; }
        }
        @keyframes bersinar {
            daripada { filter: drop-shadow(0 0 10px #fff); }
            kepada { filter: drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes slideUp {
            kepada { transform: translateY(0); kelegapan: 1; }
        }/* Butang Bunga */
        .butang-bunga {
            kedudukan: tetap;
            kanan: 20px;
            bawah: 20px;
            saiz fon: 30px;
            latar belakang: tiada;
            sempadan: tiada;
            kursor: penunjuk;
            animasi: bercahaya 1.5s silih berganti;
        }
    </style>
</head>
<badan>
    <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Guru Nanak dev ji Jayanti animasi khas menggunakan html css dan kod javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!