Webleb - UI Elements - CSS Animation Container: Shapes & Movement

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

JS

CSS Animation Container: Shapes & Movement

Recommended