Fundo animado CSS e efeitos de carregamento

985 byby.createsite

Abrir no Editor Video Publique Seu Código

Fundo animado CSS e efeitos de carregamento

Recomendado

26 July 2025

Exemplo de animação de botão HTML

19 December 2025

Modelo de formulário de login HTML com login social

24 February 2026

Blue hackeou, por que não?

HTML

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

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

@keyframes loading-animation {
            0% {
                transform: scale(1);
                transform-origin: center;
                background-color: #fff;
            }
            10% {
                transform: scale(1.1);
                transform-origin: center;
                background-color: #ccc;
            }
            30% {
                transform: scale(0.9);
                transform-origin: center;
                background-color: #666;
            }
            50% {
                transform: scale(1);
                transform-origin: center;
                background-color: #fff;
            }
            60% {
                transform: scale(1.2);
                transform-origin: center;
                background-color: #ccc;
            }
            80% {
                transform: scale(0.8);
                transform-origin: center;
                background-color: #666;
            }
            100% {
                transform: scale(0.8);
                transform-origin: center;
                background-color: #333;
            }
        }

.loading-element {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 40%;
            animation: loading-animation 10s linear infinite;
            background-color: #fff;
        }

@keyframes crumbling {
            0% {
                transform: scale(1);
                transform-origin: center;
                clip-path: inset(0);
            }
            20% {
                clip-path: circle(30% at 50% 50%);
            }
            40% {
                clip-path: polygon(20% 40%, 80% 40%, 50% 70%);
            }
            60% {
                clip-path: polygon(60% 80%, 40% 80%, 50% 60%);
            }
            80% {
                clip-path: none;
                transform: scale(0.5);
                transform-origin: center;
            }
            100% {
                opacity: 0;
            }
        }

.muro {
            position: relative;
            width: 500px;
            height: 400px;
            border-radius: 5%;
            transform: rotate(10deg);
            animation: crumbling 5s forwards;
            background-color: #fff;
            /* Representam a liberdade e a abertura da mente */
        }

.muro:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-color: #666;
            clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
            animation: fade-in 5s forwards;
        }

@keyframes fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

. luz {
            position: relative;
            width: 400px;
            height: 200px;
            border-radius: 5%;
            animation: ascen 5s forwards;
            background-color: #fff;
            color: #333;
            /* Representa a luz do conhecimento e da compreensão */
        }

.luz::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 200%;
            background-color: #333;
            clip-path: polygon(0 0, 100% 100%, 50% 0);
            animation: ascen 5s forwards;
        }

@keyframes ascen {
            0% {
                transform: translateY(100%);
            }
            100% {
                transform: translateY(0);
            }
        }

@keyframes fade-out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

.eco {
            position: relative;
            width: 400px;
            height: 200px;
            border-radius: 5%;
            animation: fade-out 5s forwards;
            background-color: #fff;
            /* Representa a saída do labirinto */
        }

.eco::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #333;
            clip-path: inset(0);
            animation: fade-in 5s forwards;
        }
    </style>
</head>
<body>

<div class="animation-container">
        <div class="muro">
            <div class="luz"></div>
            <div class="eco"></div>
        </div>
        <div class="muro muro2"></div>
        <div class="muro muro3"></div>
        <div class="muro muro4"></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;
}

.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

Exemplo de animação de botão HTML

Modelo de formulário de login HTML com login social

Blue hackeou, por que não?

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS