Buenas, aquí de nuevo R3LI4NT je!
Traigo cuatro transiciones para compartir con ustedes...
Por si les interesa el código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="transitions.css">
<title>Transiciones CSS</title>
</head>
<body>
<div class="caja1">CAJA<span class="a">1</span></div>
<div class="caja2">CAJA2</div>
<div class="caja3">CAJA<span class="b">3</span></div>
<div class="caja4">CAJA<span class="c">4</span></div>
</body>
</html>
Transición #1
Al pasar el cursor por encima de la caja, cambiara de color.
Código CSS
body {
margin:0;
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Al poner el mouse sobre él cambia de color */
.caja1 {
width: 200px;
height: 200px;
background:#00FF04;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color:#000;
font-family: Arial;
border:2px solid #138E00;
transition-property: background, color, border;
transition-duration: 1s; /* Duración de la transición (obligatorio) */
transition-delay: 20ms; /* cuanto tiempo para que empiece la transición */
}
.a {
color: #fff;
padding-left: 3px;
}
.caja1:hover {
background: #0070FF;
color: #fff;
border:2px solid #0800FF;
}
RESULTADO
(https://imagizer.imageshack.com/img924/3404/ZQ1G0I.png)
A la transición le agregue una duración, en la imagen no se ve.
Transición #2
Al pasar el cursor por encima del texto, cambiara de tamaño (ZOOM).
Código CSS
/* Texto ZOOM (font-size) */
.caja2 {
width: 200px;
height: 200px;
margin: 20px;
font-family: Arial;
background:#00B7A9;
border:2px solid #005763;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: font-size 1s ease;
transition: font-size 1s ease;
transition-duration: 1s, 1s;
}
.caja2:hover {
font-size: 3rem;
color:#000;
}
No pongo el resultado porque sería incomodo tomar screenshot.
Transición #3
Al pasar el cursor por encima, agregara sombra a la caja.
Código CSS
/* Sombra a la caja */
.caja3 {
width: 200px;
font-size: 3rem;
font-family: Arial;
margin: 20px;
height: 200px;
background:#FFD100;
border:2px solid #CEA900;
color:#000;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: 1s linear;
transition: 1s linear;
background-color: #F1C40F;
}
.caja3:hover {
-webkit-box-shadow: 11px 10px 13px 2px rgba(0,0,0,0.47);
box-shadow: 9px 9px 12px 2px rgba(0,0,0,0.47);
}
.b {
color: #fff;
padding-left: 3px;
}
RESULTADO
(https://imagizer.imageshack.com/img924/4765/SDezt2.png)
Transición #4
Añadir opacidad a la caja cuando pasemos el cursor por encima.
Código CSS
/* Implantar opacidad */
.caja4 {
width: 200px;
font-size: 3rem;
font-family: Arial;
margin: 20px;
height: 200px;
background:#00B7A9;
border:2px solid #AC1203;
color:#000;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: 1s linear;
transition: 1s linear;
background-color: #FF3030;
}
.c {
color: #fff;
padding-left: 3px;
}
.caja4:hover {
opacity: 0.7;
}
RESULTADO
(https://imagizer.imageshack.com/img923/5426/a9JNae.png)
Espero les guste.
Saludos
#R3LI4NT