Webleb - fragmentos de código - Contenedor de animación CSS: Formas y movimiento

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

Contenedor de animación CSS: Formas y movimiento

Recomendado

Un código de alejandrokundrah

Ejemplo de página de destino de sitio web de películas

Menú de Pestañas en JavaScrip

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Ejemplo de página de destino de sitio web de películas

Menú de Pestañas en JavaScrip

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS