Deslizador de página de ventana completa de CSS puro con navegación de pestaña de carpeta
| Autor: | Octavector |
|---|---|
| Views Total: | 2,686 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 10, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un concepto de Slider de página de pantalla completa CSS Cool que permite al visitante cambiar entre diapositivas de página a través de la navegación de la pestaña de la carpeta.
Funcionamiento
Agregar pestañas de página completa en el documento HTML.
<div id="tab0"></div> <div id="tab1"></div> <div id="tab2"></div> <div id="tab3"></div> <div id="tab4"></div>
Haga las pestañas ventana completa.
html, body {
height: 100%;
margin: 0;
}
.tab, #tab0, #tab1, #tab2, #tab3, #tab4 {
height: 100%;
position: absolute;
box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease;
} Los estilos CSS primarios.
.tab:hover ~ div, #tab0:hover ~ div, #tab1:hover ~ div, #tab2:hover ~ div, #tab3:hover ~ div, #tab4:hover ~ div { transform: translateX(-80vw); }
#tab0 {
width: 100vw;
background: black;
}
#tab1 {
width: 95vw;
background: #31152B;
}
#tab1::after {
content: '';
position: absolute;
width: 5vw;
height: 25vh;
background: #31152B;
border-radius: 0 20px 20px 0;
top: 75%;
right: -4vw;
}
#tab2 {
width: 90vw;
background: #723147;
}
#tab2::after {
content: '';
position: absolute;
width: 5vw;
height: 25vh;
background: #723147;
border-radius: 0 20px 20px 0;
top: 50%;
right: -4vw;
}
#tab3 {
width: 85vw;
background: #CC4452;
}
#tab3::after {
content: '';
position: absolute;
width: 5vw;
height: 25vh;
background: #CC4452;
border-radius: 0 20px 20px 0;
top: 25%;
right: -4vw;
}
#tab4 {
width: 80vw;
background: #E6B098;
}
#tab4::after {
content: '';
position: absolute;
width: 5vw;
height: 25vh;
background: #E6B098;
border-radius: 0 20px 20px 0;
top: 0;
right: -4vw;
}
