लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

830 byby.createsite

संपादक में खोलें Video अपना कोड प्रकाशित करें

लोडिंग प्रभाव के साथ CSS एनिमेटेड पृष्ठभूमि

अनुशंसित

25 August 2025

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

5 July 2025

डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड

12 December 2025

अकेले घर पर रहने के डर

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

अनुशंसित

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड

अकेले घर पर रहने के डर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS