Webleb - Extraits de Code - Conteneur d'animation CSS : formes et mouvements

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

Conteneur d'animation CSS : formes et mouvements

Recommandé

Un code de Metehan

Site web portfolio cinématographique avec Tailwind CSS et GSAP

Effet de survol du bouton d'action d'appel

HTML

CSS

JS

Recommandé

Un code de Metehan

Site web portfolio cinématographique avec Tailwind CSS et GSAP

Effet de survol du bouton d'action d'appel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS