Arrière-plan animé CSS avec formes et texte

612 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Arrière-plan animé CSS avec formes et texte

Recommandé

10 July 2023

icône de médias sociaux avec survol

4 May 2025

Un code de Mete

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background:url("./thumb.jpg") no-repeat center center;
    background-color: black;
    background-size: cover;
    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%;
    max-width: 75%;
    width: 75%;
    height: 25%;
    top:15%;
    overflow-y: hidden;
     box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
}

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .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;
    }

/* O fundo de memória é um cenário de sombra que desaparece e reaparece */
    .memory-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        transform: scale(1.2);
        animation: memory-dissolve 2s infinite;
    }

@keyframes memory-dissolve {
        0% {
            opacity: 1;
        }
        20% {
            opacity: 0;
        }
        50% {
            transform: scale(0);
        }
        80% {
            transform: scale(1.2);
        }
        100% {
            opacity: 1;
        }
    }

/* As lembranças são formas que se movem e mudam */
    .memory-shapes {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        animation: memory-shift 2s infinite;
    }

@keyframes memory-shift {
        0% {
            transform: translateX(-100%);
        }
        50% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

.memory-shapes div {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        transform: rotate(-45deg);
        animation: memory-pulse 2s infinite;
    }

@keyframes memory-pulse {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

/* A animação de dúvida é um questionamento contínuo */
    .doubt-animation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        animation: doubt-loop 2s infinite;
    }

@keyframes doubt-loop {
        0% {
            transform: translateX(-100%);
        }
        50% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

.doubt-animation div {
        width: 100px;
        height: 100px;
        background-color: #FF69B4;
        animation: doubt-pulse 2s infinite;
    }

@keyframes doubt-pulse {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

.loading-element {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #4CAF50;
        border-radius: 50%;
        animation: loading-animation 2s infinite;
    }

@keyframes loading-animation {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
        0% {
            transform: scale(1);
        }
        80% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

</style>
</head>
<body>
    <div class="animation-container">
        <div class="memory-background"></div>
        <div class="memory-shapes">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="doubt-animation">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="loading-element"></div>
    </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
  			background: black;
            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%;
            max-width: 75%;
            width: 75%;
            height: 25%;
            top:15%;
            overflow-y: hidden;
            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; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 9/16;
            height: 90vh;
            overflow: hidden;
            background: transparent;
        }
        
        @keyframes loading-animation {
            0% {
                transform: scale(1) rotate(0deg);
                background-size: 200px 200px;
            }
            25% {
                transform: scale(1.2) rotate(90deg);
                background-size: 220px 220px;
            }
            50% {
                transform: scale(1) rotate(180deg);
                background-size: 240px 240px;
            }
            100% {
                transform: scale(1) rotate(360deg);
                background-size: 260px 260px;
            }
        }
        
        @keyframes branching {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .loading-element {
            position: relative;
            width: 60px;
            height: 60px;
            background-size: 200px 200px;
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .branching-element {
            position: relative;
            width: 40px;
            height: 40px;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before, .branching-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before:before, .branching-element:before:after, .branching-element:after:before, .branching-element:after:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        /* A cada rodada, adiciona uma camada nova. Isso simboliza o crescimento do entendimento e a multiplicação das ideias. */
        @keyframes crescimento {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .crescende {
            position: relative;
            width: 20px;
            height: 20px;
            background-size: 40px 40px;
            border-radius: 50%;
            animation: crescimento 3s linear infinite;
        }
        
        .crescende:before, .crescende:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: crescimento 3s linear infinite;
        }
        
        /* Com a cada nova ideia, sentimo uma sensação de liberdade e crescimento. */
        
        /* A cada rodada, a carga é maior, representando o aumento da sabedoria e a busca pela perfeição. */
        
        .carregamento {
            position: relative;
            width: 50%;
            height: 50%;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: loading-animation 2s linear infinite;
        }
        
        .carregamento:before {
            content: "";
            position: absolute;
            width: 25%;
            height: 25%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }
        
        .carregamento:after {
            content: "";
            position: relative;
            width: 10%;
            height: 10%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }

Arrière-plan animé CSS avec formes et texte

Recommandé

Basculer mode sombre CSS

icône de médias sociaux avec survol

Un code de Mete

HTML

CSS

JS

Recommandé

Basculer mode sombre CSS

icône de médias sociaux avec survol

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS