Fundo animado CSS com efeito de carregamento

824 byby.createsite

Abrir no Editor Video Publique Seu Código

Fundo animado CSS com efeito de carregamento

Recomendado

22 August 2025

Animação de notificação de blob CSS

5 November 2024

Barra de navegação de rolagem

10 July 2025

Modelo de cardápio de restaurante em HTML

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

Recomendado

Animação de notificação de blob CSS

Barra de navegação de rolagem

Modelo de cardápio de restaurante em HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS