Sfondi animati CSS ed effetti di caricamento

597 byby.createsite

Apri nell'Editor Pubblica il Tuo Codice

Sfondi animati CSS ed effetti di caricamento

Consigliato

22 March 2025

Sito di giocoweb

20 September 2025

Fuochi d'artificio animati CSS, lucciole, girasoli

10 July 2025

Esempio HTML della schermata di caricamento animata CSS

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

Sito di giocoweb

Fuochi d'artificio animati CSS, lucciole, girasoli

Esempio HTML della schermata di caricamento animata CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS