Webleb - Snippets de Código - Animação de código CSS: areia, erros e desenvolvimento

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

Animação de código CSS: areia, erros e desenvolvimento

Recomendado

Um Código por junca

Arte de texto

Slider de imagens HTML CSS JavaScript

HTML

CSS

JS

Recomendado

Um Código por junca

Arte de texto

Slider de imagens HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS