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

CSS Animation Container: Shapes & Movement

Recommended

CSS Error 404 Animation

3D CSS Photo Frame Effect to Images

CSS Room Door Animation HTML Snippet

HTML

CSS

JS

Recommended

CSS Error 404 Animation

3D CSS Photo Frame Effect to Images

CSS Room Door Animation HTML Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS