SlideShow solo con CSS

Diseño de un carrucel solo con css, usaremos las propiedades de animación para obtener el slider animado.

Un slider es un medio que bien utilizado ofrece información al usuario. Existen muchas formas de implementarlo con css y javascript para obtener una animación atractiva.

Pues en esta ocación podremos hacerlo sin Javascript, solo usaremos CSS

para ello creamos el archivo html llamado

INDEX.HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css.css">
    <title>CSS SLIDESHOW </title>
</head>
<body>
    <div id="slide"></div>
    
</body>
</html>

Como vemos creamos una capa con el id slide para hacer referencia desde la hoja de estilos css.css

Las imagenes deberan estar en una carpeta llamada img de preferencia que sean jpg 

CODIGO DEL ARCHIVO CSS.CSS

html,body{ margin:0;padding: 0;}
#slide{    
    width: 1000px;
    height: 600px;
    margin:0 auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: pasar 8s linear infinite 0s;
    animation-timing-function: ease-in-out;
    background-image: url(img/1.jpg)
}
@keyframes pasar{
    0%{ background-image:url(img/1.jpg);}
    25%{ background-image:url(img/2.jpg);}
    50%{ background-image:url(img/3.jpg);}
    75%{ background-image:url(img/4.jpg);}
    100%{ background-image:url(img/5.jpg);}
}

Pues bien si probamos el archivo index.html en una navegador web podemos ver la animación

 

VIDEO Como diseñar un slideshow solo con CSS

Visitas: 154 | Publicado:2018-12-27 21:43:30

Más publicaciones de CSS que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::