En este artículo, vamos a crear una ilusión de imágenes debajo de la imagen principal. Es lo mismo que el conjunto de imágenes de la galería en la versión anterior de Android. Este es un proyecto simple, podemos lograr nuestro objetivo solo usando HTML Y CSS.
Resumen del proyecto:
Acercarse:
- Cree un div principal en el que almacenemos otros 3 divs.
- Utilice las pseudoclases en CSS para crear los efectos de fondo.
- Uso de @keyframes para dar algo de transición a nuestra página.
Código HTML:
- Primero, creamos un archivo HTML (index.html).
- Después de crear el archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe colocarse dentro de la etiqueta <head>.
- Luego vinculamos el archivo CSS que proporciona todo el efecto de animaciones a nuestro html. También se coloca dentro de la etiqueta <head>.
- Ahora, agregamos un enlace de Google Fonts para usar diferentes tipos de familias de fuentes en nuestro proyecto.
- 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 un div en el que podamos almacenar todos los demás divs
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href= "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&display=swap" rel="stylesheet"></head> <body> <h1>image stack illusion</h1> <div class="container"> <div class="img0"></div> <div class="img1"></div> <div class="img2"></div> </div> </body> </html>
Código CSS: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca 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 @keyframes para proporcionar los efectos de animación/transición al navegador.
- Uso de pseudoclases como ::before y ::after .
- Uso del índice z .
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Giving all of the general styles
to the body */
body {
background: rgb(0, 0, 0);
display: flex;
justify-content: center;
top: 10px;
margin-top: 5em;
font-family: 'Big Shoulders Display', cursive;
}
h1 {
color: rgb(240, 147, 8);
animation: todown 5s;
text-transform: uppercase;
}
.container {
width: 50.5em;
height: 30em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.img0 {
position: relative;
width: 100%;
height: 100%;
margin-right: 3em;
background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);
background-size: cover;
background-position: left;
animation: shrink 1s;
}
.img0::after,
.img0::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.img0::after {
background: rgb(255, 255, 255);
transform: rotate(5deg);
}
.img0::before {
background: rgb(50, 205, 50);
transform: rotate(-5deg);
}
.img1 {
width: 100%;
height: 100%;
position: relative;
left: 3em;
margin-right: 3em;
background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);
background-size: cover;
background-position: center;
}
.img1::after,
.img1::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.img1::after {
background: rgb(255, 255, 255);
transform: rotate(3deg);
}
.img1::before {
background: rgb(50, 205, 50);
transform: rotate(-3deg);
}
.img2 {
width: 100%;
height: 100%;
position: relative;
left: 10em;
background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);
background-size: cover;
background-position: right;
animation: shrink 1s;
}
.img2::after,
.img2::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.img2::after {
background: rgba(255, 255, 255, 0.829);
transform: rotate(7deg);
}
.img2::before {
background: rgba(50, 205, 50, 0.836);
transform: rotate(-7deg);
}
/* Animations Effect */
@keyframes todown {
0% {
opacity: 0;
transform: translateY(-150px);
}
60% {
opacity: 0.6;
transform: translateY(1.2em);
transform: scale(0.5, 0.5);
color: rgb(0, 0, 255);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shrink {
0% {
transform: scale(0, 0);
}
50% {
transform: scale(0.5, 0.5);
}
100% {
transform: scale(1, 1);
}
}
Combina las dos secciones anteriores (código HTML y CSS) de códigos y ejecútalo en el navegador. Mostrará el efecto de ilusión de la pila de imágenes.
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA