Crear un Banner con CSS

En este articulo voy a explicar como crear un banner con solo HTML y CSS.

Sin necesidad de usar flash, ya que HTML5 dio muerte a flash, ya que si tenemos en cuenta flash no es soportado en la actualidad por dispositivos móviles.

Así que comenzamos.

Creamos un archivo HTML.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Banner con CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="banner">

</div>
</body>
</html>

Aquí en el archivo CSS usamos 3 imágenes, con un tiempo de 10 segundos

.banner {
	width: 600px;
	height: 300px;
	margin: auto;
	border: 3px solid green;
	background-size: 100% 100%;
	animation: banner 10s;
	-webkit-animation: banner 10s infinite;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
}

@keyframes banner {
	0%,
	30% {
		background-image: url(img/banner1.jpg);
		opacity: 1;
	}
	31%,
	34% {
		opacity: 0.1;
	}
	35%,
	65% {
		opacity: 1;
		background-image: url(img/banner2.jpg);
	}
	66%,
	69% {
		opacity: 0.1;
	}
	70%,
	100% {
		opacity: 1;
		background-image: url(img/banner3.jpg);
	}
}

Deja una respuesta