CSS Animated Background with Loading Effect

Open In Editor Video Publish Your Code

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

.codigo>span {
    padding: 5px 10px;
    border-radius: 8px;
  }

.codigo>span.selector {
    background: rgba(0, 0, 0, 0.5);
  }

.codigo>span.property {
    background: rgba(0, 0, 0, 0.25);
  }

.codigo>span.value-number {
    background: rgba(0, 0, 0, 0.1);
  }

.codigo>span.brace {
    padding: 5px 10px;
    font-weight: bold;
  }

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

.loading-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: loading-animation 1s linear infinite;
  }

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

50% { transform: scale(1.5); }

100% { transform: scale(1); }
  }

.bubble1 {
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #3e3e3e;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    animation: bubble1-animation 1s ease-out;
  }

#bubble1 {
    background-color: #3e3e3e;
  }

@keyframes bubble1-animation {
    0% { transform: translateX(0) scale(1); }

40% { transform: translateX(-20px) scale(1.2); }

100% { transform: translateX(-100px) scale(0.8); }
  }

// Nível de detalhe que aparece somente na segunda repetição
  @keyframes bubble2-animation {
    0%, 100% { transform: translateX(0); }

40%, 80% {  transform: translateX(-10px); }
  }

.bubble2 {
    position: absolute;
    top: 50%;
    left: 75%;
    background-color: #3e3e3e;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    animation: bubble2-animation 1s ease-out;
  }

#bubble2 {
    background-color: #8b008b;
  }

.wave1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8b008b;
    opacity: 0.5;
    animation: wave1-animation 1s linear infinite;
  }

@keyframes wave1-animation {
    0% {
      transform: translateX(0) scale(1);
      background-color: #8b008b;
    }

50% { opacity: 0.8; }

100% {
      transform: translateX(-100px) scale(1.2);
      background-color: #8b008b;
    }
  }

/* Comentário sobre o detalhe que apenas aparece na segunda execução */
  // A mudança de tonalidade ocorre somente após as duas repetições, criando um efeito de profundidade.

.wave2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e3e3e;
    opacity: 0.3;
    animation: wave2-animation 1s linear infinite;
  }

@keyframes wave2-animation {
    0% {
      transform: translateX(0) scale(1);
      background-color: #3e3e3e;
    }

50% { opacity: 0.7; background-color: #f5f0dc; }

100% {
      transform: translateX(100px) scale(1.2);
      background-color: #3e3e3e;
    }
  }

.shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background-color: #8b008b;
    opacity: 0.8;
    animation: shape-animation 1s linear infinite;
  }

@keyframes shape-animation {
    0% {
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    }

25% { clip-path: polygon(0 0, 20% 100%, 0 100%, 0 0); }

50% { clip-path: polygon(20% 0, 100% 100%, 80% 0, 0 0); }

75% { clip-path: polygon(0 0, 100% 100%, 80% 0, 0 0); }

100% {
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    }
  }

.codigo {
    /* Adicione um código pronto para a paleta de cores */
    span.selector {
      color: #f0c808; /* Laranja */
      background: rgba(0, 0, 0, 0.5);
    }

span.property {
      background: rgba(0, 0, 0, 0.25);
    }

span.value-number {
      background: rgba(0, 0, 0, 0.1);
    }

span.brace {
      padding: 5px 10px;
      font-weight: bold;
    }
  }

.codigo>span {
    padding: 5px 10px;
    border-radius: 8px;
  }

.codigo>span::before {
    content: '\\25A0 \\25A0';
  }
</style>
<body>

<div class="animation-container">
    <div class="loading-element"></div>
    <div class="bubble1">
      
    </div>
    <div class="bubble2">
      
    </div>
    <div class="wave1">
      
    </div>
    <div class="wave2">
      
    </div>
    <div class="shape">
      
    </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);
}

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

CSS Animated Background with Loading Effect

Recommended

Animated spring

Interactive World Map with React and D3

CSS Animated Login Form Design

HTML

CSS

JS

Recommended

Animated spring

Interactive World Map with React and D3

CSS Animated Login Form Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS