En este artículo, veremos cómo podemos crear un efecto de división de texto usando CSS . El código HTML se usa para crear la estructura básica de las secciones y el código CSS se usa para establecer el estilo.
Acercarse:
- Cree un elemento div HTML con la clase «contenedor».
- Dentro del «contenedor», cree un div HTML con la clase «caja».
- Crea dos etiquetas p con texto.
- Para dividir el texto, proporcionaremos la forma del texto usando la ruta de recorte y luego usaremos la propiedad de transformación al pasar el mouse para traducirlo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Aligning container in center*/
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 35%;
left: 35%;
color: green;
}
/* General styling to text and
transition of 2s*/
.text {
position: absolute;
text-transform: uppercase;
font-size: 3rem;
transition: 2s ease;
}
/* Giving shapes to text using clip-path*/
.text1 {
clip-path: polygon(0 0, 100% 0,
100% 100%, 50% 0, 0 100%);
}
.text2 {
clip-path: polygon(0 100%, 50% 0,
100% 100%, 100% 100%, 0 100%);
}
/* transforming box 1 position on hover */
.box:hover .text1 {
transform: translateY(-10px);
}
/* transforming box 2 position on hover */
.box:hover .text2 {
transform: translateY(10px);
}
</style>
</head>
<body>
<!-- Create container -->
<div class="container">
<!-- create div with class box -->
<div class="box">
<!-- write the text to be splitted
into two p tags -->
<p class="text text1">geeksforgeeks</p>
<p class="text text2">geeksforgeeks</p>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://www.geeksforgeeks.org/how-to-split-text-horizontally-on-mouse-move-over-using-css/
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA