Presentación de fondo CSS puro con efecto Ken Burns

Vista prévia

Descripción

Una presentación de diapositivas de fondo de fantasía que utiliza CSS3 para desvanecerse a través de un grupo de imágenes de fondo con un < a href = "https://en.wikipedia.org/wiki/Ken_Burns_effect" target = "_ blank" > Ken Burns efecto.

Funcionamiento

Cree un grupo de elementos DIV con imágenes de fondo de la siguiente manera:

<div class="slideshow">

<div class="slideshow-image" style="background-image: url('1.jpg')"></div>

<div class="slideshow-image" style="background-image: url('2.jpg')"></div>

<div class="slideshow-image" style="background-image: url('3.jpg')"></div>

<div class="slideshow-image" style="background-image: url('4.jpg')"></div>
</div>

El núcleo CSS/CSS3 estilos para la presentación de diapositivas de fondo.

.slideshow {

position: absolute;

width: 100vw;

height: 100vh;

overflow: hidden;
}

.slideshow-image {

position: absolute;

width: 100%;

height: 100%;

background: no-repeat 50% 50%;

background-size: cover;

-webkit-animation-name: kenburns;

animation-name: kenburns;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-duration: 16s;

animation-duration: 16s;

opacity: 1;

-webkit-transform: scale(1.2);

transform: scale(1.2);
}

.slideshow-image:nth-child(1) {

-webkit-animation-name: kenburns-1;

animation-name: kenburns-1;

z-index: 3;
}

.slideshow-image:nth-child(2) {

-webkit-animation-name: kenburns-2;

animation-name: kenburns-2;

z-index: 2;
}

.slideshow-image:nth-child(3) {

-webkit-animation-name: kenburns-3;

animation-name: kenburns-3;

z-index: 1;
}

.slideshow-image:nth-child(4) {

-webkit-animation-name: kenburns-4;

animation-name: kenburns-4;

z-index: 0;
}

Cree el efecto Ken Burns en los fotogramas clave CSS.

@-webkit-keyframes
 kenburns-1 {
0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}

@keyframes
 kenburns-1 {
0% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 -webkit-transform: scale(1.21176);
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}

@-webkit-keyframes
 kenburns-2 {
23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}

@keyframes
 kenburns-2 {
23.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}

@-webkit-keyframes
 kenburns-3 {
48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}

@keyframes
 kenburns-3 {
48.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
}

@-webkit-keyframes
 kenburns-4 {
73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}

@keyframes
 kenburns-4 {
73.4375% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}