Frammento di animazione di caricamento CSS

60 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

12 August 2025

Modulo di accesso HTML con sfondo Matrix

26 May 2025

Un codice di mironovbogdan341

23 September 2025

Frammento di animazione CSS con caricamento in caduta

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;
  }
}

Consigliato

Modulo di accesso HTML con sfondo Matrix

Un codice di mironovbogdan341

Frammento di animazione CSS con caricamento in caduta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS