En este artículo, aprenderemos cómo crear un tipo de colgador de imágenes que experimente un movimiento oscilante usando HTML y CSS. Esto se puede usar para agregar interactividad a la página o resaltar una imagen para llamar la atención.
Acercarse:
- Primero crearemos un archivo HTML en el que agregaremos una imagen para nuestro colgador de imágenes.
- Luego crearemos un estilo CSS para dar efectos de animación al elemento que contiene la imagen.
Comenzaremos definiendo las secciones HTML y CSS de la página como se indica a continuación.
Sección HTML: En esta sección se define la estructura de la página.
- Primero crearemos un archivo HTML.
- Luego vamos a escribir el código repetitivo requerido para una página HTML.
- A continuación, vincularemos el archivo CSS o agregaremos directamente el CSS requerido que proporciona todos los efectos de animación.
- En la sección del cuerpo, agregaremos una fuente de imagen para que podamos mostrar nuestra imagen.
index.html
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main_box"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png" > </div> </body> </html>
Sección CSS: En esta sección definiremos el CSS de la página. Usando CSS le daremos diferentes tipos de animaciones y efectos a nuestra página HTML para que se vea interactiva para todos los usuarios.
- Primero restableceremos todos los efectos del navegador para que todo sea consistente en todos los navegadores.
- Luego definiremos el estilo que se le dará a los elementos que incluyen el tamaño y la posición.
- Usaremos @keyframe y pseudo-clase para agregar efectos de animación a las clases específicas.
Código:
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* In this part, we will define the characteristics
of the body of the page and align the content */
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
/* In this part, we will position and set the image
in the page */
.main_box {
margin-top: 15em;
margin-left: 15em;
width: 22em;
position: relative;
transform: center -5em;
/* We will the animation defined below to
this element */
animation: move infinite 0.5s alternate ease-in-out;
}
.main_box::before {
content: "";
width: 0.75em;
height: 0.75em;
position: absolute;
left: 50%;
top: -20%;
transform: translateX(-50%);
border: 0.125em solid rgb(6, 108, 9);
border-radius: 50%;
background-color: #ff7a00;
}
.main_box::after {
content: "";
position: absolute;
width: 0.5em;
height: 5em;
border-radius: 0.75em;
left: 50%;
top: -20%;
transform: translateX(-50%);
border: 0.125em solid rgb(6, 108, 9);
position: fixed;
/* The z-index of -2 is set to keep the object of
::after pseudo-class to beneath the other objects
*/
z-index: -2;
}
/* @keyframes is used to add the swinging
animation to our code! */
@keyframes move {
from {
transform: rotate(-6deg);
}
to {
transform: rotate(6deg);
}
}
</style>
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