Presentación de flujo de portada minimalista con CSS puro/CSS3

Vista prévia

Descripción

Hace uso de la animación CSS3, la transformación y los fotogramas clave para crear una presentación de imágenes de rotación automática con un efecto familiar de "flujo de portada".

Funcionamiento

Incluya el prefixfree. min. js para arreglos de proveedores CSS3 (recomendado).

<script src="prefixfree.min.js"></script>

Inserte un grupo de imágenes para la proyección de diapositivas en una lista HTML como se muestra a continuación.

<ul>

<li><img src="http://lorempixel.com/200/200/sports"></li>

<li><img src="http://lorempixel.com/200/200/people"></li>

<li><img src="http://lorempixel.com/200/200/cats"></li>

<li><img src="http://lorempixel.com/200/200/fashion"></li>

...
</ul>

El CSS principal para el estilo de la presentación.

ul {

list-style: none;

margin: 0;

padding: 0;

width: 200px;

height: 200px;

display: inline-block;

position: relative;
}

li {

position: absolute;

top: 0;

left: 0;

animation: coverflow 4s ease both infinite;
}
li:nth-child(2) {

animation-delay: 1s;
}
li:nth-child(3) {

animation-delay: 2s;
}
li:nth-child(4) {

animation-delay: 3s;
}

img {

border-radius: 50%;

border: 2px solid white;
}

Cree las animaciones de flujo de portada con fotogramas clave CSS3 & transformaciones.

@keyframes
 coverflow {
0%, 10% {
 opacity: 1;
 transform: none;
 z-index: 10;
}
 25%, 35% {
 opacity: 0.2;
 transform: translate3d(-170px, 0, 0) scale(0.6);
}
 50% {
 opacity: 0;
 transform: translate3d(-190px, 0, 0) scale(0.6);
}
 60% {
 opacity: 0;
 transform: translate3d(190px, 0, 0) scale(0.6);
}
 75%, 85% {
 opacity: 0.2;
 transform: translate3d(170px, 0, 0) scale(0.6);
}
}