Rumah > Artikel > hujung hadapan web > Guru Nanak dev ji Jayanti animasi khas menggunakan html css dan kod javascript

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

Mary-Kate Olsenasal: 2024-11-26 04:56:14208semak imbas

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>

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!

JavaScript css html Filter auto using pointer display position overflow margin padding border 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 Menandatangani PDF dengan Selamat Menggunakan JavaScript dan API WebCrypto?Artikel seterusnya：Bagaimanakah Saya Boleh Menandatangani PDF dengan Selamat Menggunakan JavaScript dan API WebCrypto?

Artikel berkaitan

Lihat lagi