El efecto de plegado es bastante atractivo en el sitio web, puede que lo hayas visto en algunos sitios web cuando pasas el cursor sobre el diseño de página, se dobla en la esquina. El efecto de esquina plegable se puede lograr usando solo HTML y CSS. Las siguientes secciones lo guiarán sobre cómo crear la animación. En este artículo, dividiremos el artículo en dos secciones, en la primera sección crearemos la estructura básica. En la segunda sección, decoraremos la estructura.
Creación de estructura: en esta sección, usaremos solo HTML para crear la estructura donde usaremos el efecto de plegado de esquina.
- Código HTML: en esta sección crearemos un div básico usando la etiqueta div dándole un nombre de clase.
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Paper corner fold effect on hover by using HTML and CSS </title> </head> <body> <center> <h1> GeeksforGeeks </h1> <b> Paper corner fold effect on hover by using HTML and CSS </b> <div class="Fold"> <h3> A Computer Science Portal for Geeks</h3> </div> </center> </body> </html>
Estructura de diseño: en esta sección, usaremos solo CSS para decorar la estructura que ya se creó en la sección anterior.
- Código CSS: en esta sección, primero diseñaremos el elemento div básico sin el efecto de pliegue, luego, para crear el efecto de pliegue, usaremos el pseudoelemento CSS::after . que se colocará en la esquina superior derecha del cuadro div, los bordes superior y derecho se establecen en colores que coinciden con el color de fondo del elemento div principal. A los bordes izquierdo e inferior se les da un tono más oscuro del color de fondo div, también usaremos el selector de desplazamiento para crear el efecto de plegado cuando pasemos el mouse sobre el cuadro.
CSS
<style>
h1 {
color: green;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #4EE73C;
}
h3 {
margin: 20px;
padding: 20px;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
</style>
Solución final: es la combinación de las dos secciones de codificación anteriores, y combinando la sección anterior hemos creado un efecto de esquina doblada al pasar el mouse.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Paper corner fold effect on hover
by using HTML and CSS
</title>
<style>
h1 {
color: green;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #4EE73C;
}
h3 {
margin: 20px;
padding: 20px;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<b>
Paper corner fold effect on hover
by using HTML and CSS
</b>
<div class="Fold">
<h3>
A Computer Science Portal for Geeks</h3>
</div>
</center>
</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