La división del texto al mover el mouse también se conoce como el efecto «SPLIT» o «BREAK». El efecto fue muy popular en el diseño web en el pasado, pero ahora, con la aparición de nuevos patrones de diseño web, ha comenzado a perder su lugar.
Enfoque: el enfoque consiste en dividir el texto en dos partes utilizando los selectores antes y después . Luego, usaremos el selector de desplazamiento para que el efecto sea visible solo al pasar el mouse por encima . Ahora, veamos la implementación del enfoque anterior.
Código HTML: El código HTML se utiliza para crear la estructura del cuerpo. En el siguiente código, se usa un elemento <h1> para escribir el texto en la pantalla.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Split Effect </title> </head> <body> <h1 data-title="GeeksforGeeks"> GeeksforGeeks </h1> </body> </html>
Código CSS:
- Paso 1: Primero, alineamos nuestro texto al centro y le proporcionamos el tamaño de fuente y el estilo básico.
- Paso 2: Hemos usado before selector para hacer que la mitad superior del texto sea de color blanco.
- Paso 3: luego use el selector posterior para cubrir el área blanca que hemos creado usando el selector anterior para que podamos descubrirlo más tarde usando el desplazamiento.
- Paso 4: ahora use el desplazamiento para descubrir el efecto al pasar el mouse.
Sugerencia: puede usar diferentes valores de índice z para asegurarse de que el orden siga siendo el mismo y que el valor de los márgenes utilizados en el código se pueda ajustar de acuerdo con el tamaño de fuente del texto. Asegúrese de aplicar los mismos valores al borde superior e inferior utilizados al pasar el mouse para asegurarse de que el área cubierta de blanco no sea visible al pasar el mouse por encima.
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
top: 40%;
left: 33%;
position: absolute;
font-size: 60px;
z-index: -1;
}
h1::before {
content: attr(data-title);
position: absolute;
height: 50%;
overflow: hidden;
color: whitesmoke;
z-index: 1;
top: 0;
left: 0;
}
h1::after {
content: attr(data-title);
position: absolute;
height: 53%;
top: 0;
left: 0;
overflow: hidden;
color: black;
border-bottom: 0px solid red;
z-index: 2;
transition: .5s;
}
h1:hover::after {
border-bottom: 5px solid red;
top: -5px;
}
</style>
Código completo: es la combinación de las dos secciones anteriores para dividir el texto horizontalmente al mover el mouse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Split Effect </title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
top: 40%;
left: 33%;
position: absolute;
font-size: 60px;
z-index: -1;
}
h1::before {
content: attr(data-title);
position: absolute;
height: 50%;
overflow: hidden;
color: whitesmoke;
z-index: 1;
top: 0;
left: 0;
}
h1::after {
content: attr(data-title);
position: absolute;
height: 53%;
top: 0;
left: 0;
overflow: hidden;
color: black;
border-bottom: 0px solid red;
z-index: 2;
transition: .5s;
}
h1:hover::after {
border-bottom: 5px solid red;
top: -5px;
}
</style>
</head>
<body>
<h1 data-title="GeeksforGeeks">
GeeksforGeeks
</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA