Webleb - Snippets de Código - Contêiner de animação CSS: formas e movimento

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #2F4F91;
            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: auto;
            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;
        }

.codigo::-webkit-scrollbar { /* adiciona scrollbar */ }
        .codigo::-webkit-scrollbar-thumb { -webkit-border-radius: 7px; -webkit-box-shadow: inset 0 0 6px hsla(0, 0%, 0%, 0.2); background-color: #6c6c6c; }
        .codigo::-webkit-scrollbar-thumb:hover { background-color: #333; }

/* segunda-feira: 
            "Ticket glitch" - um glitch de bilhete que desvia para a esquerda e destrói a forma do bilhete.
        */
        .segunda-ticket-glitch {
            width: 200px;
            height: 200px;
            background-color: hsla(0, 0%, 0%, 0.5);
            position: relative;
            clip-path: polygon(50% 0, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%);
            animation: segunda-ticket-glitch 2s infinite;
        }
        @keyframes segunda-ticket-glitch {
            0% { clip-path: polygon(50% 0, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%); }
            20% { clip-path: polygon(20% 0, 45% 15%, 80% 40%, 40% 60%, 20% 90%); transform: translate(-100px, -50px); }
            40% { clip-path: inherit; transform: translate(0px, 0px); }
            55% { clip-path: polygon(50% 0, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%); transform: translate(50px, 50px); }
            100% { clip-path: inherit; transform: translate(-100px, -100px); }
        }

/* quarta-feira: 
            "Quartilha do isolamento" - uma composição de formas que se afastam entre si e formam um quadrado.
        */
        .quarta-quartilha-do-isolamento {
            width: 400px;
            height: 400px;
            background-color: hsla(0, 0%, 0%, 0.5);
            position: relative;
            animation: quarta-quartilha-do-isolamento 2.5s infinite;
        }
        .quarta-quartilha-do-isolamento::before,
        .quarta-quartilha-do-isolamento::after { content: ''; position: absolute; background-color: hsla(0, 0%, 0%, 0.1); }
        .quarta-quartilha-do-isolamento::before {
            top: 25%;
            left: 25%;
            width: 150px;
            height: 150px;
            transform: rotate(45deg) skew(0deg, -45deg);
        }
        .quarta-quartilha-do-isolamento::after {
            top: 75%;
            left: 75%;
            width: 150px;
            height: 150px;
            transform: rotate(-45deg) skew(-45deg, 0deg);
        }
        @keyframes quarta-quartilha-do-isolamento {
            0% {
                transform: translate(0, 0);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            50% {
                transform: translate(150px, 50px);
                clip-path: polygon(25% 25%, 100% 0, 75% 75%, 0 100%);
                transition: transform 1.25s;
            }
            100% {
                transform: translate(0, 0);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }

/* quinta-feira: "Loneliness do quantum"
            Um objeto que brilha com uma cor que muda a cada segundo, e que se move em um eixo x, e que afasta cada vez mais do centro.
        */
        .quinta-loneliness-do-quantum {
            width: 200px;
            height: 200px;
            background-color: transparent;
            position: relative;
        }
        .quinta-loneliness-do-quantum::before,
        .quinta-loneliness-do-quantum::after { content: ''; position: absolute; background-color: #E6DB74; }
        .quinta-loneliness-do-quantum::before {
            top: 50%;
            left: 50%;
            width: 2px;
            height: 50px;
            background-color: hsla(0, 0%, 0%, 0);
            transition: width 1s;
        }
        .quinta-loneliness-do-quantum::after {
            top: 50%;
            left: 25%;
            width: 200px;
            height: 2px;
            background-color: hsla(0, 0%, 0%, 0);
            transition: width 1s;
        }
     
        @keyframes quinta-loneliness-do-quantum {
            0% {
                transform: translate(0, 0);
                filter: hue-rotate(0deg) saturate(1);
            }
            100% {
                transform: translate(100px, 0);
                filter: hue-rotate(360deg) saturate(1);
            }
        }

.sabado-o-mundo-dentro-do-codigo {
            width: 400px;
            height: 400px;
            background-color: hsla(0, 0%, 0%, 0.5);
            position: relative;
            animation: sabado-o-mundo-dentro-do-codigo 5s infinite;
        }
        .sabado-o-mundo-dentro-do-codigo::before,
        .sabado-o-mundo-dentro-do-codigo::after { content: ''; position: absolute; background-color: #66D9EF; }
        .sabado-o-mundo-dentro-do-codigo::before {
            top: 25%;
            left: 25%;
            width: 150px;
            height: 150px;
            transform: rotate(45deg) skew(0deg, -45deg);
        }
        .sabado-o-mundo-dentro-do-codigo::after {
            top: 75%;
            left: 75%;
            width: 150px;
            height: 150px;
            transform: rotate(-45deg) skew(-45deg, 0deg);
        }
        @keyframes sabado-o-mundo-dentro-do-codigo {
            0% {
                transform: translate(0, 0);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                opacity: 0;
            }
            25% {
                transform: translate(50px, -75px);
                clip-path: inherit;
                opacity: 0.25;
            }
            50% {
                transform: translate(100px, 0);
                clip-path: inherit;
                opacity: 0.5;
            }
            75% {
                transform: translate(50px, 75px);
                clip-path: inherit;
                opacity: 0.25;
            }
            100% {
                transform: translate(0, 0);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                opacity: 0;
            }
        }

/* segundo código CSS para a página */
        html { -webkit-tap-highlight-color: transparent; }
        body { font-family: 'Lato', 'Arial', sans-serif; }

.codigo::-webkit-scrollbar { width: 5px; }
        .codigo::-webkit-scrollbar-thumb { background-color: #6c6c6c; border-radius: 7px; }
        .codigo::-webkit-scrollbar-thumb:hover { background-color: #333; }

Contêiner de animação CSS: formas e movimento

Recomendado

Arena do Rei dos Carros

caixa de mosca para animação de jogos

Protocolo de paralisia de rolagem

HTML

CSS

JS

Recomendado

Arena do Rei dos Carros

caixa de mosca para animação de jogos

Protocolo de paralisia de rolagem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS