Presentación de desvanecimiento de pantalla completa con HTML puro/CSS

Vista prévia

Descripción

Un enfoque HTML/CSS puro para crear una proyección de diapositivas de fondo de pantalla completa adaptable que utiliza animaciones CSS3 para efectos de transición de fundido cruzado.

Funcionamiento

Cree una lista de diapositivas para la proyección de diapositivas.

<ul class="slideshow">

<li> <span>Slide One</span> </li>

<li> <span>Slide Two</span> </li>

<li> <span>Slide Three</span> </li>

<li> <span>Slide Four</span> </li>
</ul>

Estilo de la presentación.

html { min-height: 100%; }

body { height: 100%; }

.slideshow {

list-style: none;

z-index: 1;
}

.slideshow li span {

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

color: transparent;

background-size: cover;

background-position: 50% 50%;

background-repeat: none;

opacity: 0;

z-index: 0;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-animation: imageAnimation 24s linear infinite 0s;

-moz-animation: imageAnimation 24s linear infinite 0s;

animation: imageAnimation 24s linear infinite 0s;
}

.no-cssanimations .slideshow li span { opacity: 1; }

Crea las animaciones crossfade cambiando el nivel de opacidad usando @keyframes.

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

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

@keyframes
 imageAnimation { 0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-webkit-keyframes
 titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes
 titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes
 titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

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

.slideshow li:nth-child(1) span { background-image: url(1.jpg); }

.slideshow li:nth-child(2) span {

background-image: url(2.jpg);

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

animation-delay: 6s;
}

.slideshow li:nth-child(3) span {

background-image: url(3.jpg);

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

animation-delay: 12s;
}

.slideshow li:nth-child(4) span {

background-image: url(4.jpg);

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

animation-delay: 18s;
}