CSS Brain Animation HTML Snippet

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

JS

CSS Brain Animation HTML Snippet

Recommended