Fondo animado CSS con efecto de carga

1,367 byby.createsite

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Formulario de inicio de sesión moderno

15 July 2025

Animación de alternancia de triángulos CSS

11 August 2025

Plantilla HTML con P5.js y CSS

HTML

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<style>
  /* Inicialize CSS Foundation */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
    background: url("https://vinixodin.com/thumb.jpg") no-repeat center center;
    background-color: #1c1e24;
    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; }

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