En este efecto CSS, la mitad inferior del texto está oculta y cuando el usuario pasa el cursor sobre el texto, una parte del texto se vuelve visible. Este efecto se puede crear dando 0 brillo al texto que se ocultará y usando la propiedad clip-path para hacerlo visible. JavaScript se utiliza para obtener la posición del cursor.
Acercarse:
- Cree un archivo HTML con el nombre index.html .
- Cree dos elementos div, con el nombre de la clase como upper_text y el otro con el puntero del nombre de la clase .
- Agregue estilos a estas dos clases en CSS.
- Asegúrese de dar estilos a estos dos elementos div con exactamente las mismas propiedades, es decir, el tamaño y la posición deben ser exactamente iguales para que ambos divs se coloquen uno encima del otro.
- Utilice la propiedad clip-path en el elemento div upper_text para recortar la mitad superior del texto.
- Agregue una etiqueta de secuencia de comandos en el archivo index.html .
- Agregue un detector de eventos al documento para escuchar el evento mousemove .
- Obtenga la referencia al elemento HTML que tiene un puntero de nombre de clase.
- Obtenga la posición actual del cursor y cambie el estilo del elemento del puntero. Recorta un círculo de un radio predefinido en la posición actual del cursor. Para que el texto se haga visible para ese radio.
Código HTML:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
background-color: black;
}
.upper_text,
.pointer {
position: fixed;
top: 40vh;
left: 40vw;
width: 350px;
color: chartreuse;
font-size: 50px;
cursor: all-scroll;
}
.upper_text {
clip-path: polygon(0% 0%,
100% 0%, 100% 50%, 0% 50%);
}
</style>
</head>
<body>
<div class="upper_text">
Geeks For Geeks
</div>
<div class="pointer">
Geeks For Geeks
</div>
<script>
document.addEventListener('mousemove', (e) => {
const pointer = document.querySelector('.pointer');
pointer.style.clipPath =
`circle(30px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vivshubham y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA