Frammento di animazione di caricamento CSS

626 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

10 December 2024

Modello di barra di navigazione HTML e CSS reattivo

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

Frammento di animazione di caricamento CSS

Consigliato

Clone di Spotify

Un codice di smartfunction186

Modello di barra di navigazione HTML e CSS reattivo

HTML

CSS

JS

Consigliato

Clone di Spotify

Un codice di smartfunction186

Modello di barra di navigazione HTML e CSS reattivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS