Animation de chargement CSS avec effets de fragment

1,077 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Animation de chargement CSS avec effets de fragment

Recommandé

5 July 2025

Panneau de connexion et d'inscription Glassy V2 de TheDoc

19 December 2025

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

31 July 2025

Modèle HTML de page de connexion Liquid Drop

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