Sfondi animati CSS ed effetti di caricamento

831 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Sfondi animati CSS ed effetti di caricamento

Consigliato

21 November 2025

Modulo di accesso al neomorfismo Codice HTML CSS

12 December 2025

Esempio di barra di navigazione HTML CSS: menu orizzontale reattivo

23 August 2025

Guida ai marchi automobilistici mondiali (turco)

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

Consigliato

Modulo di accesso al neomorfismo Codice HTML CSS

Esempio di barra di navigazione HTML CSS: menu orizzontale reattivo

Guida ai marchi automobilistici mondiali (turco)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS