En este artículo, vamos a crear un efecto de carga de ventana antes de que aparezca la pantalla de bloqueo usando HTML y CSS.
Glipmse del efecto de carga de Windows:
Acercarse:
- Cree un archivo HTML que contenga HTML div en el que estamos dando el efecto de cargador.
- Luego creamos 5 elementos de tramo que se utilizan para crear elementos en línea.
- Luego tenemos que usar @keyframe para crear características de animación.
- Entonces tenemos que usar la propiedad nth-child() para seleccionar diferentes niños.
Código HTML:
- Primero, creamos un archivo HTML (index.html).
- Ahora, después de la creación de nuestro archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe colocarse entre la etiqueta <head>.
- Vinculamos el archivo CSS que proporciona todo el efecto de la animación a nuestro HTML. Esto también se coloca entre 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.
- Luego, tenemos que crear un div en el que podamos almacenar toda la parte del encabezado y las etiquetas de intervalo.
index.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=Dosis:wght@300&family=Hanalei&display=swap" rel="stylesheet"> </head> <body> <h1>Windows-Loading-Effect</h1> <div class="container"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </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.
- 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 la propiedad n-th child() para llamar a los elementos secundarios.
Todas las características de CSS están cubiertas en el siguiente código.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Common styles of project which
are applied to body */
body{
background-color: rgb(0, 21, 138);
overflow: hidden;
font-family: 'Dosis', sans-serif;
color: #fff;
}
/* Style to our heading */
h1{
display: flex;
margin-top: 3em;
justify-content: center;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span{
display: inline-block;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
margin: 0 0.125em;
background-color: rgb(235, 217, 217);
opacity: 0;
}
/* Calling childs using nth-child() property */
span:last-child{
animation: move-right 3s infinite;
animation-delay: 100ms;
background-color: #000;
}
span:nth-child(5){
animation: move 3s infinite;
animation-delay: 200ms;
background-color: rgb(41, 133, 22);
}
span:nth-child(4){
animation: move-right 3s infinite;
animation-delay: 300ms;
background-color: #000;
}
span:nth-child(3){
animation: move 3s infinite;
animation-delay: 400ms;
background-color: rgb(41, 133, 22);
}
span:nth-child(2){
animation: move-right 3s infinite;
animation-delay: 500ms;
background-color: #000;
}
span:first-child{
animation: move 3s infinite;
animation-delay: 600ms;
background-color: rgb(41, 133, 22);
}
/* Animations effect*/
@keyframes move{
0%{
transform: translateX(-31em);
opacity: 0;
}
30%,60%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(31em);
opacity: 0;
}
}
@keyframes move-right{
0%{
transform: translateX(31em);
opacity: 0;
}
30%,60%{
transform: translateX(0);
opacity: 1;
}
100%{
transform: translateX(-31em);
opacity: 0;
}
}
Código completo: aquí combinaremos las dos secciones de código anteriores en una sola.
index.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=Dosis:wght@300&family=Hanalei&display=swap"
rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Common styles of project which
are applied to body */
body {
background-color: rgb(0, 21, 138);
overflow: hidden;
font-family: "Dosis", sans-serif;
color: #fff;
}
/* Style to our heading */
h1 {
display: flex;
margin-top: 3em;
justify-content: center;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span {
display: inline-block;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
margin: 0 0.125em;
background-color: rgb(235, 217, 217);
opacity: 0;
}
/* Calling childs using nth-child() property */
span:last-child {
animation: move-right 3s infinite;
animation-delay: 100ms;
background-color: #000;
}
span:nth-child(5) {
animation: move 3s infinite;
animation-delay: 200ms;
background-color: rgb(41, 133, 22);
}
span:nth-child(4) {
animation: move-right 3s infinite;
animation-delay: 300ms;
background-color: #000;
}
span:nth-child(3) {
animation: move 3s infinite;
animation-delay: 400ms;
background-color: rgb(41, 133, 22);
}
span:nth-child(2) {
animation: move-right 3s infinite;
animation-delay: 500ms;
background-color: #000;
}
span:first-child {
animation: move 3s infinite;
animation-delay: 600ms;
background-color: rgb(41, 133, 22);
}
/* Animations effect */
@keyframes move {
0% {
transform: translateX(-31em);
opacity: 0;
}
30%,
60% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(31em);
opacity: 0;
}
}
@keyframes move-right {
0% {
transform: translateX(31em);
opacity: 0;
}
30%,
60% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-31em);
opacity: 0;
}
}
</style>
</head>
<body>
<h1>Windows-Loading-Effect</h1>
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Producción:
Efecto de carga de Windows
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA