En este artículo, vamos a crear un efecto de plegado de imagen debajo de la imagen principal. Este es un proyecto simple, podemos lograr nuestro objetivo solo usando HTML y CSS.
Enfoque :
- Cree el div principal en el que estamos creando 4 etiquetas de lista.
- Uso de la propiedad de selector nth-child() para dar diferentes estilos a diferentes elementos de la lista.
Código HTML:
- Primero, creamos un archivo HTML (index.html).
- Luego vinculamos el archivo CSS que proporciona todo el efecto de la animación a nuestro HTML.
También se coloca dentro de la etiqueta <head> . - Llegando a la sección del cuerpo de nuestro código HTML.
- En primer lugar, estamos dando encabezado a nuestra página.
- Luego, tenemos que crear una lista desordenada en la que tenemos 5 elementos de la lista que se usan más para almacenar la imagen.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>IMAGE FOLDING EFFECT</h1> <ul class="un-list"> <li class="lis"></li> <li class="lis"></li> <li class="lis"></li> <li class="lis"></li> </ul> </body> </html>
Código CSS: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que se vea interactiva para todos los usuarios.
En CSS, tenemos que recordar los siguientes puntos.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Uso de la propiedad de selector nth-child() para dar diferentes estilos a diferentes elementos de la lista.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(9, 138, 57);
list-style: none;
}
h1{
display: flex;
justify-content: center;
margin: 2em;
}
.un-list{
width: 40em;
height: 20em;
top: 50%;
left: 50%;
transform: translate(120%,50%);
display: flex;
}
.lis{
width: 100em;
height: 30em;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210310024310/img1.png"
);
background-size: cover;
}
.lis:nth-child(even){
transform: skewY(-40deg);
}
.lis:nth-child(odd){
transform: skewY(40deg);
}
.lis:nth-child(1){
border-left: blanchedalmond 0.2em solid;
background-position: 0;
border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(2){
background-position: -8em;
border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(3){
background-position: -16em;
border-right: blanchedalmond 0.2em solid;
}
.lis:nth-child(4){
background-position: -24em;
border-right: blanchedalmond 0.2em solid;
}
Producción:
efecto de plegado de imagen
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA