En este artículo, aprenderemos cómo crear una animación de escaneo. Esto se puede usar para agregar interactividad a la página del cargador. Esto se aborda
mediante HTML y CSS simples.
Vistazo del Proyecto:
Acercarse:
- Primero crearemos un archivo HTML en el que agregaremos un div para agregarle un intervalo.
- Luego crearemos un estilo CSS para dar efectos de animación a la animación de escaneo.
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 un lapso para agregar nuestro texto.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="scan"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210428125647/barcode1-300x158.png" alt="barcode" /> </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.
style.css
.scan {
width: 10em;
text-align: center;
padding: 6px 2px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: auto;
border: dashed .25em rgb(90, 85, 85);
transform: translate(-50%);
}
.scan::after {
content: '';
background: rgb(23, 162, 74);
width: 0.25em;
height: 3.5em;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
opacity: 7;
z-index: 2;
animation: 2s infinite ease-in-out roll;
}
.scan img {
height: 30px;
width: 98%;
}
@keyframes roll {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(-50px);
}
}
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