Fondo animado CSS con efecto de carga

81 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

19 October 2024

Sitio web de portafolios para desarrolladores HTML

4 August 2025

Calculadora de IMC

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

Fondo animado CSS con efecto de carga

Recomendado

Sitio web de portafolios para desarrolladores HTML

Cambio de realidad simulada

Calculadora de IMC

HTML

CSS

JS

Recomendado

Sitio web de portafolios para desarrolladores HTML

Cambio de realidad simulada

Calculadora de IMC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS