Deslizador de contenido estilo acordeón con CSS3 Flex y Transition

Vista prévia

Descripción

Un deslizador de contenido liso estilo acordeón creado por < a href = "https://codepen.io/dp_lewis" target = "_ blank" rel = "noopener" > dp_lewis que le permite expandir la diapositiva actual con una animación deslizante suave cuando se desplaza sobre, construido con CSS3 Flex y propiedades de transición.

Funcionamiento

Haga un deslizador de contenido usando la lista desordenada HTML.

<ul>

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>
</ul>

Los principales estilos CSS para crear un deslizador de contenido estilo acordeón como las cajas flexibles CSS3.

ul,
li {

margin: 0;

padding: 0;

list-style: none;
}

ul {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 100vh;
}

li {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

-webkit-transition: -webkit-box-flex 500ms ease-out;

-webkit-transition: -webkit-flex 500ms ease-out;

transition: -webkit-box-flex 500ms ease-out;

transition: -ms-flex 500ms ease-out;

transition: flex 500ms ease-out;

padding: 20px;
}

El CSS para el estilo de las diapositivas.

li:nth-child(1) { background: #f2b635; }

li:nth-child(2) { background: #f19a2a; }

li:nth-child(3) { background: #49b3e8; }

li:nth-child(4) { background: #00a0e6; }

li:nth-child(5) { background: #f25648; }

El CSS para animar el control deslizante cuando el mouse pasa el ratón.

li:hover {

-webkit-box-flex: 3;

-webkit-flex: 3;

-ms-flex: 3;

flex: 3;
}