Saya sedang menatal laman web ayat KPR apabila saya melihat kesan sejuk ini di bahagian bawah. Setiap kali saya melihat sesuatu seperti ini, saya sentiasa mahu menciptanya semula. Proses saya adalah mudah: Saya mulakan dengan cuba meniru kesan, kemudian membuat blog untuk menerangkan cara ia dilakukan, bertujuan untuk memecahkan reka bentuk yang kompleks kepada langkah yang mudah difahami.
Pada mulanya, saya sering meragui sama ada saya boleh melakukannya, tetapi selepas berfikir secara mendalam, saya biasanya mencari cara untuk memecahkan reka bentuk itu. Dengan menyambungkan kepingan itu, saya berjaya mencapai kesannya. Cukup bercakap — mari selami bagaimana anda boleh membuatnya sendiri!
Memecah Kesan Pengaki Ayat KPR
Di penghujung tapak, anda akan menemui sepanduk KPR di latar belakang. Pada pandangan pertama, ia mungkin kelihatan agak rumit, tetapi ia tidaklah begitu rumit.
Mula-mula, buat div dengan kelas .bekas. Ini akan menjadi elemen akar untuk tutorial kami.
Seterusnya, bahagikan .bekas kepada dua bahagian: .pembungkus-subbekas dan pengaki. Elemen pengaki akan memegang sepanduk KPR.
Sekarang, bahagikan lagi .subcontainer-wrapper kepada dua bahagian. Bahagian atas mengandungi semua kandungan untuk tapak web kami, manakala bahagian bawah dibiarkan kosong tanpa latar belakang—pada asasnya tidak kelihatan, tetapi ia masih mempunyai lebar dan ketinggian tempat pandang. Bahagian bawah adalah penting kerana ia membolehkan kita melihat pengaki.
Sehingga ini, semua elemen berada dalam aliran HTML biasa, iaitu dari atas ke bawah. Sekarang, kita perlu memecahkan pesanan ini dengan meletakkan pengaki di belakang dan membawa .subbekas-pembungkus di hadapan. Untuk melakukan ini, kami akan menetapkan .subcontainer-wrapper kepada kedudukan: absolute relative to .container induknya. Ini akan mengalih keluar .subcontainer-wrapper daripada aliran DOM biasa.
Itu sahaja yang kita perlukan untuk menetapkan kesannya. Sekarang, isi bahagian atas .subcontainer-wrapper dengan kandungan, tetapi biarkan bahagian bawah—div yang tidak kelihatan—kosong. Selain itu, tambahkan kandungan pada pengaki.
Setelah anda menambahkan kandungan, kandungan tersebut sepatutnya kelihatan seperti ini.
Bahagian atas menyembunyikan latar belakang dan semasa anda menatal ke bawah, apabila kandungan yang kelihatan tamat, bahagian yang tidak kelihatan mendedahkan pengaki. Voilà! Itu sahaja — ringkas dan mudah.
_Terima kasih kerana mengikuti! Saya harap anda mendapati panduan ini membantu dan mudah difahami. Kekal ingin tahu dan teruskan meneroka!
asal: KPR-ayat
Tapak demo: Pautan Demo , Untuk demonstrasi ini, saya menggunakan tapak Google I/O (https://io.google/2024/) dan menyesuaikannya untuk mempamerkan konsep yang serupa.
Kod sumber: Pautan Github_
Atas ialah kandungan terperinci Membongkar kesan ajaib Di Sebalik Kesan Pengaki Ayat KPR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kemas kini 'CSS4'Apr 11, 2025 pm 12:05 PMSejak saya mula -mula berbunyi pada perkara CSS4¹, ada lebih banyak perbincangan di atasnya. Saya akan mengulangi pemikiran kegemaran saya dari orang lain di sini. Ada
Tiga jenis kodApr 11, 2025 pm 12:02 PMSetiap kali saya memulakan projek baru, saya menyusun kod yang saya cari dalam tiga jenis, atau kategori jika anda suka. Dan saya fikir jenis ini boleh digunakan
HTTPS mudah!Apr 11, 2025 am 11:51 AMSaya ' telah bersalah secara terbuka merungut kerumitan HTTPS. Pada masa lalu, saya membeli sijil SSL dari vendor pihak ketiga dan menghadapi masalah
Panduan Atribut Data HTMLApr 11, 2025 am 11:50 AMSemua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.
Memahami kebolehubahan dalam JavaScriptApr 11, 2025 am 11:47 AMSekiranya anda tidak bekerja dengan kebolehubahan dalam JavaScript sebelum ini, anda mungkin mudah mengelirukan dengan memberikan pembolehubah kepada nilai baru, atau penugasan semula.
Input bentuk gaya tersuai dengan ciri CSS modenApr 11, 2025 am 11:45 AMIa mungkin sepenuhnya untuk membina kotak semak tersuai, butang radio, dan suis bertukar hari ini, sambil tetap semantik dan boleh diakses. Kami tidak memerlukan
Watak nota kakiApr 11, 2025 am 11:34 AMTerdapat watak nombor superset khas yang kadang -kadang sesuai untuk nota kaki. Di sini mereka:
Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScriptApr 11, 2025 am 11:29 AMPernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
