Retro fading presentación con puro CSS/CSS3

Vista prévia

Descripción

Una presentación de diapositivas de imagen de página completa Retro & que recorre un conjunto de imágenes con superposiciones animadas y una animación crossfade basada en CSS3. Creado por < a href = "https://codepen.io/Joshuasm32" target = "_ blank" rel = "noopener" > Joshuasm32 .

Funcionamiento

Crea bloques de superposición animados en la página.

<div class="block n1"></div>
<div class="block n2"></div>
<div class="block n3"></div>
<div class="block n4"></div>

Inserte un conjunto de imágenes en el documento para la proyección de diapositivas.

<img class="bg i1" src="1.jpg" alt="">
 <img class="bg i2" src="2.jpg" alt="">
 <img class="bg i3" src="3.jpg" alt="">
 ...

Los estilos CSS/CSS3 requeridos para la proyección de diapositivas.

html,
body {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

border: 0;

margin: 0;

padding: 0;

overflow: hidden;

background-position: center;

background-attachment: fixed;

background-repeat: no-repeat;
}

.block {

position: absolute;

z-index: 100;
}

.n1 {

top: 0;

bottom: 0;

left: 0;

background: rgba(140,35,24,.5);

-webkit-animation: horizantal 7.5s linear infinite;

animation: horizantal 7.5s linear infinite;
}

.n2 {

left: 0;

right: 0;

bottom: 0;

background: rgba(94,140,106,.5);

-webkit-animation: vertical 7.5s linear infinite;

animation: vertical 7.5s linear infinite;

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;
}

.n3 {

top: 0;

bottom: 0;

right: 0;

background: rgba(136,166,94,.5);

-webkit-animation: horizantal 7.5s linear infinite;

animation: horizantal 7.5s linear infinite;

-webkit-animation-delay: 3s;

animation-delay: 3s;
}

.n4 {

left: 0;

right: 0;

top: 0;

background: rgba(242,196,90,.5);

-webkit-animation: vertical 7.5s linear infinite;

animation: vertical 7.5s linear infinite;

-webkit-animation-delay: 4.5s;

animation-delay: 4.5s;
}
@-webkit-keyframes
 horizantal {
0% {
width: 0
}
 50% {
width: 100%
}
 100% {
width: 0
}
}
@keyframes
 horizantal {
0% {
width: 0
}
 50% {
width: 100%
}
 100% {
width: 0
}
}
@-webkit-keyframes
 vertical {
0% {
height: 0
}
 50% {
height: 100%
}
 100% {
height: 0
}
}
@keyframes
 vertical {
0% {
height: 0
}
 50% {
height: 100%
}
 100% {
height: 0
}
}

.bg {

position: absolute;

top: 0;

left: 0;

background: #fff;

opacity: 0;

-webkit-animation: appear 8s linear infinite;

animation: appear 8s linear infinite;
}

.i2 {

-webkit-animation-delay: 2s;

animation-delay: 2s;
}

.i3 {

-webkit-animation-delay: 4s;

animation-delay: 4s;
}

.i4 {

-webkit-animation-delay: 6s;

animation-delay: 6s;
}
@-webkit-keyframes
 appear {
10% {
 opacity: 1
}
 30% {
 opacity: 0;
 background-position: right;
 zoom: 105%;
}
}
@keyframes
 appear {
10% {
 opacity: 1
}
 30% {
 opacity: 0;
 background-position: right;
 zoom: 105%;
}
}