Webleb - Snippet di Codice - Frammento HTML di animazione cerebrale CSS

HTML

CSS

/* Crie uma atmosfera sombria para expressar a ansiedade e a dúvida. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #333;
            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%;
            min-width: 100%;
            width: 100%;
            overflow-y: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .brace          { color: #F8F8F2; }
        .comment        { color: #75715E; }
        .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;
        }

/* A cena é composta por uma série de discos, representando a dúvida e a incerteza. */
        .animation-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(to bottom, #ff69b4, #ffff00);
            animation: rotate 2s linear infinite;
        }

@keyframes rotate {
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

/* Os discos se movem em círculos, representando a dúvida em espiral. */
        .animation-container::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(to bottom, #00ff00, #ff0000);
            animation: rotate2 2s linear infinite;
            animation-delay: 0.5s;
        }

@keyframes rotate2 {
            100% {
                transform: translate(-50%, -50%) rotate(720deg);
            }
        }

/* A última adição à cena é a textura, que representa a ansiedade em forma de riscos visíveis. */
        .animation-container::before {
            background-image: linear-gradient(45deg, #ffff00, #ff0000, #00ff00, #ff0000);
        }

/* Mostra um snippet de código para ressaltar a ideia de que a dúvida é um processo contínuo. */
        .codigo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -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%;
            min-width: 100%;
            width: 100%;
            overflow-y: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .brace          { color: #F8F8F2; }
        .comment        { color: #75715E; }
        .function       { color: #A6E22E; }

.codigo::-webkit-scrollbar {
            width: 0;
        }

.codigo > span {
            margin: 0;
            padding: 0;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            padding: 20px;
            white-space: pre-line;
            width: 100%;
            text-align: left;
            line-height: 1.6;
            background: #272822;
            max-height: 25%;
            overflow-y: hidden;
        }

.codigo > .selector {
            color: #F92672;
            padding: 0 10px;
            border-bottom: 1px solid #333;
        }

.codigo > .selector::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 10px;
        }

.codigo > .property {
            color: #66D9EF;
            padding: 0 10px;
            border-bottom: 1px solid #333;
        }

.codigo > .property::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #66D9EF;
            margin-right: 10px;
        }

.codigo > :last-child {
            color: #66D9EF;
            padding: 0 10px;
            border-bottom: none;
        }

.codigo > :last-child::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #66D9EF;
            margin-right: 10px;
        }

.codigo > span.value-number {
            color: #AE81FF;
            font-weight: bold;
        }

.codigo > span.value-string {
            color: #E6DB74;
        }

.codigo > span.value-color {
            color: #A6E22E;
        }

.codigo > span.value-color::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #A6E22E;
            margin-right: 10px;
        }

.codigo > span.brace {
            color: #F8F8F2;
            font-size: 16px;
        }

.codigo > span.comment {
            color: #75715E;
            font-style: italic;
        }

.codigo > span.function {
            color: #A6E22E;
        }

Frammento HTML di animazione cerebrale CSS

Consigliato

Animazione delle onde cerebrali CSS

Un codice di anhtuanle2004yst

Concetto di orologio di reazione

HTML

CSS

JS

Consigliato

Animazione delle onde cerebrali CSS

Un codice di anhtuanle2004yst

Concetto di orologio di reazione

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS