La función de efecto de texto de doble capa es muy nueva en el mundo de la animación de texto dirigida a sitios web animados y sus usuarios como audiencia. La característica básicamente tiene dos capas para cada palabra y la capa superior puede manipularse mediante varios eventos, como eventos de desplazamiento . La rotación de la capa superior se realiza en cierto ángulo para crear un efecto de bisagra. Parecerá que la capa superior está articulada a la capa inferior desde un solo punto.
Enfoque: el enfoque es crear primero dos capas usando el selector anterior y luego usar el selector de desplazamiento para girarlo al pasar el mouse .
Código HTML: en esta sección, hemos envuelto cada alfabeto en un lapso con un atributo de título de datos que tiene el mismo valor que el alfabeto.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Double Layered Text</title> <body> <div class="geeks"> <span data-title="G">G</span> <span data-title="E">E</span> <span data-title="E">E</span> <span data-title="K">K</span> <span data-title="S">S</span> <span data-title="F">F</span> <span data-title="O">O</span> <span data-title="R">R</span> <span data-title="G">G</span> <span data-title="E">E</span> <span data-title="E">E</span> <span data-title="K">K</span> <span data-title="S">S</span> </div> </body> </html>
Código CSS:
- Paso 1: realice algunos estilos básicos como un fondo, una familia de fuentes, un tamaño de fuente y ajuste el texto al centro.
- Paso 2: ahora use antes del selector con el contenido establecido como el título de datos usado en la etiqueta de intervalo . Esto creará la segunda capa del texto. Asegúrese de proporcionar un color diferente al color dado a la primera capa.
- Paso 3: ahora usa algunas transiciones para dar una animación fluida.
- Paso 4: Por último, use el selector de desplazamiento para cambiar la perspectiva o, en palabras simples, gire la segunda capa.
Nota: Elija cuidadosamente la rotación de grados y los valores para las transiciones. Puede usar la consola del navegador para obtener los valores perfectos.
<style>
body {
background: black;
}
.geeks {
text-align: center;
margin: 200px auto 0;
font-family: Arial, Helvetica, sans-serif;
}
.geeks span {
font-size: 80px;
font-weight: 700;
color: green;
position: relative;
text-shadow: -1px 0 0 rgba(0, 0, 0, .2);
}
.geeks span::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
transform-origin: left;
color: #fff;
transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: rotateY(25deg);
}
.geeks span:hover::before {
transform: perspective(1000px) rotate(-67deg);
}
</style>
Código Completo: Es la combinación de las dos secciones anteriores del código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Double Layered Text</title>
<style>
body {
background: black;
}
.geeks {
text-align: center;
margin: 200px auto 0;
font-family: Arial, Helvetica, sans-serif;
}
.geeks span {
font-size: 80px;
font-weight: 700;
color: green;
position: relative;
text-shadow: -1px 0 0 rgba(0, 0, 0, .2);
}
.geeks span::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
transform-origin: left;
color: #fff;
transition: .5s cubic-bezier(
0.175, 0.885, 0.32, 1.275);
transform: rotateY(25deg);
}
.geeks span:hover::before {
transform: perspective(1000px) rotate(-67deg);
}
</style>
</head>
<body>
<div class="geeks">
<span data-title="G">G</span>
<span data-title="E">E</span>
<span data-title="E">E</span>
<span data-title="K">K</span>
<span data-title="S">S</span>
<span data-title="F">F</span>
<span data-title="O">O</span>
<span data-title="R">R</span>
<span data-title="G">G</span>
<span data-title="E">E</span>
<span data-title="E">E</span>
<span data-title="K">K</span>
<span data-title="S">S</span>
</div>
</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