Animación de carga CSS con efectos de fragmento

568 byby.createsite

Abrir en el editor Publica tu código

Animación de carga CSS con efectos de fragmento

Recomendado

25 November 2024

Cuadro de búsqueda

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<style>

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

body {
    background:url("https://vinixodin.com/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 {
    aspect-ratio: 9/16;
    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;
}

/* Reflexões */
.loading-element {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F8F8F2;
    animation: loading-animation 1s linear infinite;
    box-shadow: 0 0 0 2px #F8F8F2;
}

@keyframes loading-animation {
    0% { transform: translate(20px, 20px); }
    25% { transform: translate(-20px, 20px); }
    50% { transform: translate(20px, -20px); }
    75% { transform: translate(-20px, -20px); }
    100% { transform: translate(20px, 20px); }
}

/* Fragmentação da personalidade */
.persona-fragment {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #A6E22E;
    animation: fragment-animation 2s linear infinite;
    opacity: 0.3;
}

@keyframes fragment-animation {
    0% { transform: translate(10px, 10px); opacity: 0.3; }
    25% { transform: translate(-10px, 10px); opacity: 0.5; }
    50% { transform: translate(0, -20px); opacity: 0.7; }
    75% { transform: translate(-20px, -10px); opacity: 0.5; }
    100% { transform: translate(10px, 10px); opacity: 0.3; }
}

/* Reflexões fragmentadas */
.reflexao-fragmentada {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: linear-gradient(to bottom, #F8F8F2, #A6E22E);
    animation: fragmentado-animation 2s linear infinite;
    opacity: 0.5;
}

@keyframes fragmentado-animation {
    0% { transform: translate(10px, 10px); opacity: 0.5; }
    25% { transform: translate(-10px, 10px); opacity: 0.7; }
    50% { transform: translate(0, -20px); opacity: 0.3; }
    75% { transform: translate(-20px, -10px); opacity: 0.5; }
    100% { transform: translate(10px, 10px); opacity: 0.5; }
}

/* Sombreamento - desespero */
.sombreamento {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #A6E22E, #A6E22E);
    opacity: 0.2;
    animation: sombreamento-animation 3s linear infinite;
}

@keyframes sombreamento-animation {
    0% { opacity: 0.2; }
    25% { opacity: 0.5; }
    50% { opacity: 0.8; }
    75% { opacity: 0.2; }
    100% { opacity: 0.2; }
}

</style>
</head>
<body>
<div class="animation-container">
  <div class="loading-element"></div>
  <div class="persona-fragment" style="top: 20px; left: 20px;"></div>
  <div class="reflexao-fragmentada" style="top: 40px; left: 40px;"></div>
  <div class="sombreamento"></div>
</div>

</body>
</html>

CSS

/* 
  Base 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;
  aspect-ratio: 9/16;
}

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

.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;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

Animación de carga CSS con efectos de fragmento

Recomendado

regalo de cumpleaños

Feliz día de la madre

Cuadro de búsqueda

HTML

CSS

JS

Recomendado

regalo de cumpleaños

Feliz día de la madre

Cuadro de búsqueda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS