CSS sólo crossfading fondo de diapositivas

Vista prévia

Descripción

Una presentación de fondo de pantalla completa con un efecto de transición crossfade construido sólo con HTML y CSS/CSS3.

Funcionamiento

Compile la estructura HTML para la proyección de diapositivas en segundo plano.

<div class="crossfade">

<figure></figure>

<figure></figure>

<figure></figure>

<figure></figure>

<figure></figure>
</div>

Los estilos CSS principales.

.crossfade > figure {

animation: imageAnimation 30s linear infinite 0s;

backface-visibility: hidden;

background-size: cover;

background-position: center center;

color: transparent;

height: 100%;

left: 0px;

opacity: 0;

position: absolute;

top: 0px;

width: 100%;

z-index: 0;
}

Añada imágenes de fondo a la proyección de diapositivas.

.crossfade > figure:nth-child(1) { background-image: url('1.jpg'); }

.crossfade > figure:nth-child(2) {

animation-delay: 6s;

background-image: url('2.jpg');
}

.crossfade > figure:nth-child(3) {

animation-delay: 12s;

background-image: url('3.jpg');
}

.crossfade > figure:nth-child(4) {

animation-delay: 18s;

background-image: url('4.jpg');
}

.crossfade > figure:nth-child(5) {

animation-delay: 24s;

background-image: url('5.jpg');
}

Crea el efecto crossfade usando animaciones CSS3.

@keyframes
 imageAnimation {
0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}