Fragmento de animación de carga de CSS

62 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

16 December 2024

Un código de meriem

23 August 2025

Página de inicio de sesión en turco HTML: Formulario de inicio de sesión

13 June 2024

DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

HTML

CSS

/* 
css_foundation 
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:url("./thumb.jpg") no-repeat center center;
  background-color: black;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 25%;
  max-width: 75%;
  width: 75%;
  height: 25%;
  top:15%;
  overflow-y: hidden;
  box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector       { color: #F92672; }
.property       { color: #66D9EF; }
.value-number   { color: #AE81FF; }
.value-string   { color: #E6DB74; }
.value-color    { color: #A6E22E; }
.function       { color: #A6E22E; }

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: transparent;
}

/* Animação da fragmentação de foco */
.loading-element {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #F8F8F2;
  border-radius: 50%;
  animation: loading-animation 2s linear infinite;
}

@keyframes loading-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.loading-element:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-element:after {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Camadas de fratura de foco */
.frag-1 {
  z-index: 1;
}
.frag-2 {
  z-index: 2;
}
.frag-3 {
  z-index: 3;
}
.frag-1:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-1-animation 2s linear infinite;
}
.frag-2:before {
  content: '';
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-2-animation 2s linear infinite;
}
.frag-3:before {
  content: '';
  position: absolute;
  width: 5%;
  height: 5%;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: frag-3-animation 2s linear infinite;
}

/* Animações de fraguras */
@keyframes frag-1-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-2-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes frag-3-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Recomendado

Un código de meriem

Página de inicio de sesión en turco HTML: Formulario de inicio de sesión

DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS