在线演示： DEMO
DEMO中及以下代码并没有写兼容代码，请使用高级浏览器打开，IE版本对CSS3支持并不太友好，IE11打开没有滚屏效果。
兼容代码前缀：
-webkit-
-moz-
-o-
-ms-
直接上代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>pagaToggle</title><style>/* Pre Style */* { padding: 0; margin: 0; border: none; outline: none; text-decoration: none; }body { overflow: hidden; }/* fontface */@font-face {font-family: "raphaelicons";src: url('fonts/raphaelicons-webfont.eot') ,
url('fonts/raphaelicons-webfont.svg') ,
url('fonts/raphaelicons-webfont.ttf') ,
url('fonts/raphaelicons-webfont.woff') ;font-weight: normal;font-style: normal;}/* media */
@media screen and ( max-width: 500px ) {.box .pages > section > div { width: 40vw; height: 40vw; }.box .pages > section > h2 { font-size: 15vw; top: 5vw; }}
@media screen and ( max-width: 1100px ) {.box .pages > section > figure > figcaption > a > span { font-size: 5vw; line-height: 200px; }}/* Nav Style */
.box { width: 100%; height: 100%; }.box > input, .box > a, .box > a:after { position: fixed; }.box > input { width: 20%; height: 60px; opacity: 0; z-index: 2; cursor: pointer; bottom: 0; }.box > a { width: 20%; height: 60px; display: inline-block; text-align: center; color: white; font: 2vw/60px arial; text-shadow: 1px 1px 1px black; background-color: #f14d6f; z-index: 1; bottom: 0; }.box > a:after { content: ""; width: 0; height: 0; display: block; border: 40px solid rgba(0,0,0,0); border-bottom-color: #f14d6f; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }.box > input:nth-of-type(1),a:nth-of-type(1){ left: 0%; }.box > input:nth-of-type(2),a:nth-of-type(2){ left: 20%; }.box > input:nth-of-type(3),a:nth-of-type(3){ left: 40%; }.box > input:nth-of-type(4),a:nth-of-type(4){ left: 60%; }.box > input:nth-of-type(5),a:nth-of-type(5){ left: 80%; }.box > input:checked + a { background-color: #8c1e34; }.box > input:checked + a:after { border-bottom-color: #8c1e34; }.box > input:hover + a { background-color: #c13955; }.box > input:hover + a:after { border-bottom-color: #c13955; }.box > input:checked:hover + a { background-color: #8c1e34; }.box > input:checked:hover + a:after { border-bottom-color: #8c1e34; }/* Toggle Style */.box > input:nth-of-type(1):checked ~ .pages { transform: translateY(0vh); }.box > input:nth-of-type(2):checked ~ .pages { transform: translateY(-100vh); }.box > input:nth-of-type(3):checked ~ .pages { transform: translateY(-200vh); }.box > input:nth-of-type(4):checked ~ .pages { transform: translateY(-300vh); }.box > input:nth-of-type(5):checked ~ .pages { transform: translateY(-400vh); }.box > input:nth-of-type(1):checked ~ .pages > section:nth-of-type(1) > figure > img { animation: imgfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(2):checked ~ .pages > section:nth-of-type(2) > figure > img { animation: imgfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(3):checked ~ .pages > section:nth-of-type(3) > figure > img { animation: imgfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(4):checked ~ .pages > section:nth-of-type(4) > figure > img { animation: imgfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(5):checked ~ .pages > section:nth-of-type(5) > figure > img { animation: imgfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(1):checked ~ .pages > section:nth-of-type(1) > figure > figcaption > a > span { animation: textfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(2):checked ~ .pages > section:nth-of-type(2) > figure > figcaption > a > span { animation: textfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(3):checked ~ .pages > section:nth-of-type(3) > figure > figcaption > a > span { animation: textfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(4):checked ~ .pages > section:nth-of-type(4) > figure > figcaption > a > span { animation: textfloat .6s ease-in backwards .4s; }.box > input:nth-of-type(5):checked ~ .pages > section:nth-of-type(5) > figure > figcaption > a > span { animation: textfloat .6s ease-in backwards .4s; }@keyframes imgfloat {from { opacity: 0; transform: translateY(-40px); }to { opacity: 1; }}
@keyframes textfloat {from { opacity: 0; transform: translateY(40px); }to { opacity: 1; }}/* Pages Style */.pages { transition: all .6s linear; }.pages > section { width: 100vw; height: 100vh; background-color: white; text-align: center; color: #ffa2b5; overflow: hidden; position: relative; }.pages > section:nth-of-type(odd) { background-color: #ffa2b5; color: white; }.pages > section > div { width: 300px; height: 300px; background: #ffa2b5; margin: 0 auto; text-align: center; transform: translateY(-50%) rotate(45deg); }.pages > section:nth-of-type(odd) div { background: white; }.pages > section > h2 { font-family: "raphaelicons"; font-size: 120px; color: white; display: inline-block; position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); }.pages > section:nth-of-type(odd) > h2 { color: #ffa2b5; }.pages > section > figure > img { box-shadow: 0 0 3px black; opacity: 1; }.pages > section > figure > figcaption > a > span { font: 80px/270px arial; text-shadow: 1px 1px 1px black; color: #ffa2b5; }.pages > section:nth-of-type(odd) > figure > figcaption > a > span { color: white; }</style></head><body><div class="box"><input type="radio" name="page_btn" checked><a href="javascript:;">Page1</a><input type="radio" name="page_btn"><a href="javascript:;">Page2</a><input type="radio" name="page_btn"><a href="javascript:;">Page3</a><input type="radio" name="page_btn"><a href="javascript:;">Page4</a><input type="radio" name="page_btn"><a href="javascript:;">Page5</a><div class="pages"><section><div></div><h2>g</h2><figure><img src="img/1.png" alt="pic"><figcaption><a href="http://www.cnblogs.com/glunefish" target="_blank"><span>THIS IS GLUNEFISH BLOG.</span></a> </figcaption></figure></section><section><div></div><h2>d</h2><figure><img src="img/1.png" alt="pic"><figcaption><a href="http://www.cnblogs.com/glunefish" target="_blank"><span>THIS IS GLUNEFISH BLOG.</span></a> </figcaption></figure></section><section><div></div><h2>e</h2><figure><img src="img/1.png" alt="pic"><figcaption><a href="http://www.cnblogs.com/glunefish" target="_blank"><span>THIS IS GLUNEFISH BLOG.</span></a> </figcaption></figure></section><section><div></div><h2>f</h2><figure><img src="img/1.png" alt="pic"><figcaption><a href="http://www.cnblogs.com/glunefish" target="_blank"><span>THIS IS GLUNEFISH BLOG.</span></a> </figcaption></figure></section><section><div></div><h2>h</h2><figure><img src="img/1.png" alt="pic"><figcaption><a href="http://www.cnblogs.com/glunefish" target="_blank"><span>THIS IS GLUNEFISH BLOG.</span></a> </figcaption></figure></section></div></div></body></html>
Atas ialah kandungan terperinci 在线演示一个全屏切换效果实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Adakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AMH5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.
H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AMH5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.
Apa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AMH5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo
H5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AMAlat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.
Warisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AMHtml5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan
Kod H5: Kebolehcapaian dan HTML SemantikApr 09, 2025 am 12:05 AMH5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.
Adakah H5 sama dengan HTML5?Apr 08, 2025 am 12:16 AM"H5" dan "HTML5" adalah sama dalam kebanyakan kes, tetapi mereka mungkin mempunyai makna yang berbeza dalam senario tertentu tertentu. 1. "HTML5" adalah standard yang ditentukan oleh W3C yang mengandungi tag dan API baru. 2. "H5" biasanya merupakan singkatan HTML5, tetapi dalam pembangunan mudah alih, ia boleh merujuk kepada rangka kerja berdasarkan HTML5. Memahami perbezaan ini membantu menggunakan istilah ini dengan tepat dalam projek anda.
Apakah fungsi H5?Apr 07, 2025 am 12:10 AMH5, atau HTML5, adalah versi kelima HTML. Ia menyediakan pemaju dengan set alat yang lebih kuat, menjadikannya lebih mudah untuk membuat aplikasi web yang kompleks. Fungsi teras H5 termasuk: 1) unsur -unsur yang membolehkan lukisan grafik dan animasi di laman web; 2) tag semantik seperti, dan lain -lain untuk menjadikan struktur laman web jelas dan kondusif untuk pengoptimuman SEO; 3) API baru seperti perkhidmatan berasaskan lokasi GeolocationPi; 4) Keserasian silang penyemak imbas perlu dipastikan melalui ujian keserasian dan perpustakaan polyfill.
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
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
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.
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver CS6
Alat pembangunan web visual
