Rumah
hujung hadapan web
tutorial js
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
Nov 26, 2024 am 04:56 AM<!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!
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

Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Alat panas Tag

Artikel Panas
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu
By 王林
Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
