5.1 Cambio de color
Transiciones CSS (transitions) permiten animar cambios en las propiedades de los elementos, creando efectos visuales suaves. Ahora veremos cómo usar transiciones para cambiar el color, el tamaño y la posición de los elementos, además de mostrar ejemplos prácticos.
Cambiar el color de un elemento usando transiciones CSS es una de las aplicaciones más comunes. Esto puede incluir cambiar el color del texto, el fondo o los bordes de un elemento.
Ejemplo 1: Cambio del color de fondo
Este ejemplo muestra cómo cambiar el color de fondo de un elemento al pasar el cursor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio del color de fondo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: elemento con dimensiones fijas y color de fondo.box:hover: al pasar el cursor sobre el elemento el color de fondo cambia suavemente de azul a verde en 1 segundo con la función de timing ease
Ejemplo 2: Cambio del color del texto
Este ejemplo muestra cómo cambiar el color del texto de un elemento al pasar el cursor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio del color del texto</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">¡Pasa el cursor sobre mí!</div>
</body>
</html>
Explicación del código:
.text: elemento con color de texto inicial.text:hover: al pasar el cursor, el color del texto cambia suavemente de rojo a violeta en 0.5 segundos con una función de timing lineal
5.2 Cambio de tamaño
Cambiar el tamaño de los elementos usando transiciones CSS puede incluir cambiar el ancho, la altura o ambos tamaños simultáneamente.
Ejemplo 1: Cambio de ancho
Este ejemplo muestra cómo cambiar el ancho de un elemento al pasar el cursor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio de ancho</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: elemento con ancho inicial de 100 píxeles-
.box:hover: al pasar el cursor, el ancho del elemento aumenta suavemente a 200 píxeles en 2 segundos con la función de timingease-in-out
Ejemplo 2: Cambio de altura
Este ejemplo muestra cómo cambiar la altura de un elemento al pasar el cursor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio de altura</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explicación del código:
.box: elemento con altura inicial de 100 píxeles.box:hover: al pasar el cursor, la altura del elemento aumenta suavemente a 200 píxeles en 1.5 segundos con la función de timingease
5.3 Cambio de posición
Cambiar la posición de los elementos usando transiciones CSS puede incluir mover un elemento usando propiedades
top, right, bottom, left o transformaciones translate.
Ejemplo 1: Movimiento usando left
Este ejemplo muestra cómo mover un elemento a la derecha al pasar el cursor usando la propiedad left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movimiento del elemento</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: elemento con posición inicialleft: 0.box:hover: al pasar el cursor, el elemento se mueve suavemente a la derecha 100 píxeles en 2 segundos
Ejemplo 2: Movimiento usando transform: translate
Este ejemplo muestra cómo mover un elemento a la derecha y hacia abajo al pasar el cursor usando la transformación translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movimiento con transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explicación del código:
.box: elemento con transformación inicialtranslate(0, 0).box:hover: al pasar el cursor, el elemento se mueve suavemente 100 píxeles a la derecha y 50 píxeles hacia abajo en 1 segundo
GO TO FULL VERSION