¡Añade elegancia y dinamismo a tus textos con las transiciones CSS para efectos de entrada! Descubre cómo lograrlo con este sencillo código.
<!DOCTYPE html>
<html>
<head>
<title>Neon Letter Effect</title>
<style>
p {
color: #fff;
font-size: 24px;
}
.ease-in-left {
opacity: 1;
transform: translateX(0);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.ease-in-left:hover {
opacity: 1;
transform: translateX(-100%);
}
.neon {
font-size: 72px;
color: white;
text-shadow: 0 0 5px hotpink, 0 0 10px hotpink, 0 0 20px hotpink,
0 0 30px hotpink, 0 0 40px hotpink, 0 0 50px hotpink, 0 0 60px hotpink;
}
/* Optional: Add black background to enhance effect */
body {
padding: 70px;
background-color: black;
}
</style>
</head>
<body>
<h1 class="neon ease-in-left">Efecto Transicion Ease-in!</h1>
<p>Pasa el cursor para vel el efecto</p>
</body>
</html>- La clase
.ease-in-leftse utiliza para aplicar una transición suave al encabezado<h1>. Al pasar el cursor sobre él (hover) sobre él, se desplaza hacia la izquierda (translateX) y cambia su opacidad. - La clase
.neonse aplica al encabezado<h1>y crea un efecto de letras neón. Esto se logra utilizando una sombra de texto (text-shadow) con varios niveles y colores de rosa brillante. - Opcionalmente, se añade un fondo negro al
<body>para realzar el efecto neón.
Al visualizar esta página en un navegador web, verás un encabezado “Efecto Transición Ease-in!” con efecto de letras neón. Al pasar el cursor sobre él, se desplazará suavemente hacia la izquierda. Además, aparecerá un párrafo que te invita a ver el efecto al hacer hover.
