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);
}
}
Agregue un comentario