Efecto de carga progresiva de imagen en CSS puro
| Autor: | jbrizio |
|---|---|
| Views Total: | 4,486 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 22, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Un cargador de imágenes CSS puro para simular la carga progresiva de la imagen con un efecto de desenfoque como se ve en Instagram y Medium.com.
See also:
- biblioteca de JavaScript para efecto de carga de imagen progresiva â & #128; & #147; Interlace. js
- biblioteca de carga de imágenes progresivas â & #128; & #147; Antimoderada. js
- efecto de carga de imagen de estilo medio â & #128; & #147; pilpil
Funcionamiento
Inserte su imagen de baja calidad como fondo en la Página Web.
<div style="background-image:url(1.jpg);"></div>
Los principales estilos CSS para el contenedor DIV.
div.demo {
width: 900px;
height: 650px;
filter: blur(20px);
background-size: cover;
background-color: #a07250;
animation: hd-quality 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
div.demo::after {
animation: low-quality 1s;
animation-delay: 1s;
} Inserte su imagen de alta calidad de la siguiente manera:
@keyframes
low-quality {
0% {
background-image: url(low.jpg);
}
}
@keyframes
hd-quality {
0% {
background-image: url(hd.jpg);
filter: blur(20px);
}
100% {
background-image: url(hd.jpg);
filter: blur(0px);
}
}
