Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Diseño web
»
4 Tipos de Transiciones [CSS]
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: 4 Tipos de Transiciones [CSS] (Leído 11781 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 396
Cuanto más silencioso te vuelves, más puedes oir.
4 Tipos de Transiciones [CSS]
«
en:
Septiembre 27, 2020, 06:48:25 am »
Buenas, aquí de nuevo R3LI4NT je!
Traigo cuatro transiciones para compartir con ustedes...
Por si les interesa el código HTML:
Código: Text
<!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
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
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
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
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
Transición #4
Añadir opacidad a la caja cuando pasemos el cursor por encima.
Código
CSS
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
Espero les guste.
Saludos
#R3LI4NT
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
C4sp3n
{ L0 } Ñuub
Mensajes: 4
Re:4 Tipos de Transiciones [CSS]
«
Respuesta #1 en:
Septiembre 27, 2020, 11:33:34 am »
Muy buenas transiciones R3LI4NT. Muchas gracias por el aporte. Soy nuevo en este foro, bueno nuevo no, de vez en cuando entro a ojear jeje.
Pero es ahora cuando me decidí a registrarme para ingresar en esta comunidad. Un saludo y espero aportar pronto información interesante para todo el mundo.
En línea
R3LI4NT
{ L4 } Geek
Mensajes: 396
Cuanto más silencioso te vuelves, más puedes oir.
Re:4 Tipos de Transiciones [CSS]
«
Respuesta #2 en:
Septiembre 27, 2020, 02:02:16 pm »
Hola C4sp3n, bienvenido a la comunidad!
Me alegro que te haya gustado las transiciones, esperamos con ansias tus aportes.
Saludos
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Diseño web
»
4 Tipos de Transiciones [CSS]
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more