Webleb - Snippet di Codice - Animazione del codice CSS: sabbia, errori e sviluppo

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
        /* CSS Foundation */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background:url("https://vinixodin.com/thumb.jpg") no-repeat center center;
            background-color: #272822; 
            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;
        }
        
        /* Código em branco no areia, sendo erodido pelo vento e ondas */
        .areia {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            clip-path: circle(40% at 50% 50%);
            animation: areia-erosao 10s linear infinite;
        }

/* Erros de código espalhados pelo areia */
        .erro {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff3737;
            border-radius: 50%;
            clip-path: circle(8px at 50% 50%);
            animation: erro-variacao 5s linear infinite;
            /* Cada erro tem uma animação individual, mas é difícil distinguir qual erro é qual */
        }

.erro:nth-child(2) {
            animation-name: erro-variacao-menos;
        }

.erro:nth-child(3) {
            animation-name: erro-variacao-mas;
        }

@keyframes erro-variacao-menos {
            0% {
                transform: scale(1) translate(0 0);
            }
            50% {
                transform: scale(0.9) translate(8px -5px);
            }
            100% {
                transform: scale(1) translate(0 0);
            }
        }

@keyframes erro-variacao-mas {
            0% {
                transform: scale(1) translate(0 0);
            }
            50% {
                transform: scale(1.1) translate(-5px 5px);
            }
            100% {
                transform: scale(1) translate(0 0);
            }
        }

@keyframes erro-variacao {
            0% {
                transform: scale(1) translate(0 0);
            }
            50% {
                transform: scale(1.1) translate(-5px 5px);
            }
            100% {
                transform: scale(0.9) translate(8px -5px);
            }
        }

/* Erros de código se espalhando */
        .erro2 {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff3737;
            border-radius: 50%;
            clip-path: circle(8px at 50% 50%);
            animation: erro-spread 5s linear infinite;
        }

@keyframes erro-spread {
            0% {
                top: 50%;
                left: -50%;
                transform: scale(0.8);
            }
            50% {
                top: 25%;
                left: 50%;
                transform: scale(1);
            }
            100% {
                top: 40%;
                left: -20%;
                transform: scale(1);
            }
        }

/* Desenvolvedor se perde em labirinto */
        .dev {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #fff;
            border-radius: 50%;
            clip-path: circle(30px at 50% 50%);
            animation: dev-rotação 5s linear infinite;
        }

.dev::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: #000;
            border-radius: 50%;
        }

.dev::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            transform: rotate(-90deg);
            animation: dev-sinal 5s linear infinite;
        }

@keyframes dev-rotação {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

@keyframes dev-sinal {
            0% {
                translateX(0);
            }
            50% {
                translateX(-20px);
            }
            100% {
                translateX(10px);
            }
        }

/* Código é reescrito e se reorganiza */
        .código-reenascimento {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: scale(1);
            background: #fff;
            clip-path: circle(40% at 50% 50%);
            animation: código-areia 10s linear infinite;
        }

@keyframes código-areia {
            0% {
                transform: scale(0.5);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.5);
            }
        }

/* Cenário digital é criado e se desenvolve */
        .cenário {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: scale(0.5);
            background: #fff;
            clip-path: circle(50% at 50% 50%);
            animation: cenário-creação 10s linear infinite;
        }

@keyframes cenário-creação {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

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

Animazione del codice CSS: sabbia, errori e sviluppo

Consigliato

Un codice di alejandrokundrah

Esempio di gioco di fisica Ragdoll di Matter.js

Negozio di scarpe

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Esempio di gioco di fisica Ragdoll di Matter.js

Negozio di scarpe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS