El efecto de animación de texto sesgado se puede crear usando HTML y CSS , esta animación se ve muy bien y se puede usar en sitios web para que se vean más dinámicos, las siguientes secciones lo guiarán sobre cómo crear el efecto de animación deseado.
Primera sección: en esta sección, crearemos una etiqueta div básica que consta de varias etiquetas de intervalo dentro de ella.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Skew Text</title> </head> <body> <div> <span>G</span> <span>E</span> <span>E</span> <span>K</span> <span>S</span> <span>F</span> <span>O</span> <span>R</span> <span>G</span> <span>E</span> <span>E</span> <span>K</span> <span>S</span> </div> </body> </html>
Segunda sección: en esta sección, primero diseñaremos las etiquetas de intervalo usando las propiedades básicas de CSS; además, usaremos el selector nth-child() para seleccionar los elementos secundarios del elemento y usaremos la propiedad skewY() para producir el efecto deseado al pasar el mouse por encima.
Código CSS:
CSS
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 40px;
width: 40px;
margin-right: -2px;
background-color: green;
text-align: center;
font-size: 2em;
}
div:hover span:nth-child(odd){
transform: skewY(-15deg);
}
div:hover span:nth-child(even){
transform: skewY(15deg);
}
</style>
Código final: es la combinación de las dos secciones de código anteriores
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Skew Text</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 40px;
width: 40px;
margin-right: -2px;
background-color: green;
text-align: center;
font-size: 2em;
}
div:hover span:nth-child(odd){
transform: skewY(-15deg);
}
div:hover span:nth-child(even){
transform: skewY(15deg);
}
</style>
<body>
<div>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
<span>F</span>
<span>O</span>
<span>R</span>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA