1.
Desplazamiento de una imagen de izquierda a derecha
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desplazamiento de Imagen de Izquierda a Derecha</title>
<style>
/* Reset de márgenes y padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Contenedor de la imagen */
.contenedor {
width: 100%;
height: 100vh; /* Altura completa de la ventana */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Para evitar que la imagen se desborde del contenedor */
background-color: #f0f0f0; /* Fondo suave */
}
/* Imagen que se mueve de izquierda a derecha */
.imagen {
width: 300px; /* Ajusta el tamaño de la imagen */
animation: moverIzquierdaDerecha 5s infinite linear; /* Animación de 5
segundos */
}
/* Definición de la animación de desplazamiento */
@keyframes moverIzquierdaDerecha {
0% {
transform: translateX(-100%); /* Empieza fuera de la pantalla a la izquierda */
}
50% {
transform: translateX(0); /* Se mueve al centro */
}
100% {
transform: translateX(100%); /* Sale de la pantalla a la derecha */
}
}
</style>
</head>
<body>
<div class="contenedor">
<img src="tu-imagen.jpg" alt="Imagen Desplazante" class="imagen">
</div>
</body>
</html>
2. Movimiento de rotación continua
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotación Continua</title>
<style>
/* Reset de márgenes y padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Contenedor para centrar la imagen */
.contenedor {
width: 100%;
height: 100vh; /* Altura completa de la ventana */
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* Fondo suave */
}
/* Imagen que rota de forma continua */
.imagen {
width: 200px; /* Ajusta el tamaño de la imagen */
animation: rotacionContinua 5s linear infinite; /* Animación de rotación
continua */
}
/* Definición de la animación de rotación */
@keyframes rotacionContinua {
0% {
transform: rotate(0deg); /* Comienza en 0 grados */
}
100% {
transform: rotate(360deg); /* Rota 360 grados (una vuelta completa) */
}
}
</style>
</head>
<body>
<div class="contenedor">
<img src="tu-imagen.jpg" alt="Imagen Rotando" class="imagen">
</div>
</body>
</html>
3. Imagen que se desplaza hacia arriba y hacia abajo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagen Desplazándose</title>
<style>
/* Reset de márgenes y padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Contenedor de la imagen */
.contenedor {
width: 100%;
height: 100vh; /* Altura completa de la ventana */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Para que no se vean las partes fuera del contenedor */
}
/* Imagen que se mueve */
.imagen {
width: 200px; /* Ajusta el tamaño de la imagen */
animation: moverArribaAbajo 3s infinite ease-in-out;
}
/* Definir la animación de mover la imagen */
@keyframes moverArribaAbajo {
0% {
transform: translateY(0); /* Empieza en la posición original */
}
50% {
transform: translateY(-100px); /* Se mueve hacia arriba */
}
100% {
transform: translateY(0); /* Vuelve a la posición original */
}
}
</style>
</head>
<body>
<div class="contenedor">
<img src="ruta-a-tu-imagen.jpg" alt="Imagen Desplazante" class="imagen">
</div>
</body>
</html>
4. Escala de imagen con hover (al pasar el ratón por encima)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Escala de Imagen con Hover</title>
<style>
/* Reset de márgenes y padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Contenedor de la imagen */
.contenedor {
width: 100%;
height: 100vh; /* Altura completa de la ventana */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* Para evitar que se desborde la imagen */
}
/* Imagen que cambia de tamaño al hacer hover */
.imagen {
width: 300px; /* Ajusta el tamaño de la imagen */
transition: transform 0.3s ease; /* Animación suave al hacer hover */
}
/* Efecto de escala al pasar el ratón por encima */
.imagen:hover {
transform: scale(1.2); /* Escala la imagen un 20% más grande */
}
</style>
</head>
<body>
<div class="contenedor">
<img src="ruta-a-tu-imagen.jpg" alt="Imagen con Hover" class="imagen">
</div>
</body>
</html>
5. Efecto de desvanecimiento y desplazamiento (Fade In y Movimiento)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efecto Fade In y Movimiento</title>
<style>
/* Reset de márgenes y padding */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Contenedor para centrar el contenido */
.contenedor {
width: 100%;
height: 100vh; /* Altura completa de la ventana */
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* Fondo suave */
}
/* Imagen que tendrá el efecto de fade in y movimiento */
.imagen {
width: 300px; /* Ajusta el tamaño de la imagen */
opacity: 0; /* Inicialmente invisible */
transform: translateY(50px); /* Comienza desplazada hacia abajo */
animation: fadeInMovimiento 2s ease-out forwards; /* Animación con fade in y
movimiento */
}
/* Definición de la animación de fade in y movimiento */
@keyframes fadeInMovimiento {
0% {
opacity: 0; /* Inicia invisible */
transform: translateY(50px); /* Comienza desplazada hacia abajo */
}
100% {
opacity: 1; /* Finaliza completamente visible */
transform: translateY(0); /* Llega a su posición original */
}
}
</style>
</head>
<body>
<div class="contenedor">
<img src="tu-imagen.jpg" alt="Imagen con Fade In y Movimiento" class="imagen">
</div>
</body>
</html>
