Trecho de código de animação de labirinto CSS

548 ByBy.inc

Abrir no Editor Publique Seu Código

Trecho de código de animação de labirinto CSS

Recomendado

15 September 2025

Exemplo de animação de grade CSS

19 March 2025

Um código de Mete

HTML

CSS

/* css_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;
        }

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

/* Lost in Code Maze Animation */
        .maze {
            position: relative;
            width: 100%;
            height: 100%;
        }

.maze::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border: 1px solid #666;
            transform: rotate(45deg);
            animation: rotate 3s linear infinite;
        }

.maze::after {
            content: '';
            position: absolute;
            top: 60%;
            left: 60%;
            width: 20%;
            height: 20%;
            border-radius: 50%;
            background-color: #ff69b4;
            animation: pulse 2s ease-in-out infinite;
        }

@keyframes rotate {
            0% {
                transform: rotate(45deg);
            }
            50% {
                transform: rotate(90deg);
            }
            100% {
                transform: rotate(45deg);
            }
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }

/* Lost in Code Maze Pseudo-elements */
        .maze .point {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: #ff0000;
            animation: bounce 2s linear infinite;
        }

@keyframes bounce {
            0% {
                transform: translateY(-50%) translateX(-50%);
            }
            50% {
                transform: translateY(-50%) translateX(50%);
            }
            100% {
                transform: translateY(-50%) translateX(-50%);
            }
        }

.maze .line {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 20px;
            background-color: #000;
            animation: move 2s linear infinite;
        }

@keyframes move {
            0% {
                transform: translateX(-50%);
            }
            50% {
                transform: translateX(50%);
            }
            100% {
                transform: translateX(-50%);
            }
        }

/* Example CSS snippet */
        .loading-element {
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }

Trecho de código de animação de labirinto CSS

Recomendado

Exemplo de animação de grade CSS

Luzes de estudo

Um código de Mete

HTML

CSS

JS

Recomendado

Exemplo de animação de grade CSS

Luzes de estudo

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS