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

Rumah

hujung hadapan web

tutorial js

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

Nov 26, 2024 am 04:56 AM

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

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;kepala&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;tajuk&gt;Guru Nanak Jayanti Animasi&lt;/title&gt;
    &lt;gaya&gt;
        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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;badan&gt;
    &lt;div&gt;

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!

Kenyataan Laman Web ini

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