Estructura HTML del contenedor de animación CSS

113 ByBy.inc

Abrir en el editor Publica tu código

Estructura HTML del contenedor de animación CSS

Recomendado

21 July 2025

Menú de navegación con botones de opción CSS

5 August 2025

Lista de tarjetas de empresa: ejemplo de HTML y CSS

2 June 2025

Un código de abfomap

HTML

CSS

/* Fundição de CSS */
        
        * {
            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;
        }

/* Friday:  Code Reveal */

.codigo-anime {
            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: 50%;
            max-width: 50%;
            width: 50%;
            height: 50%;
            animation: revelar 2s ease-in-out;
            clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
            pointer-events: none;
        }

@keyframes revelar {
            0% {
                clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
                opacity: 0;
            }
            50% {
                clip-path: polygon(100% 0%, 50% 50%, 0% 100%);
                opacity: 1;
            }
            100% {
                clip-path: polygon(100% 0%, 50% 50%, 0% 100%);
                opacity: 1;
            }
        }

/* Animacao principal */
        .contagem {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            font-family: Arial, sans-serif;
            animation: contagem 2s infinite;
        }

@keyframes contagem {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            25% {
                transform: translate(-50%, -50%) scale(1.1);
            }
            50% {
                transform: translate(-50%, -50%) scale(0.9);
            }
            75% {
                transform: translate(-50%, -50%) scale(1.05);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

.linha {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 40px;
            background: #E6DB74;
            animation: anima-linha 2s infinite;
        }

@keyframes anima-linha {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            25% {
                transform: translate(-50%, -50%) rotate(45deg);
            }
            50% {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            75% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
        }

.ponto {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: #E6DB74;
            animation: anima-ponto 2s infinite;
        }

@keyframes anima-ponto {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            25% {
                transform: translate(-50%, -50%) scale(0.9);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
            }
            75% {
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

.estrela {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            background: #E6DB74;
            animation: anima-estrela 2s infinite;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

@keyframes anima-estrela {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            25% {
                transform: translate(-50%, -50%) rotate(45deg);
            }
            50% {
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            75% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) rotate(0deg);
            }
        }

Recomendado

Menú de navegación con botones de opción CSS

Lista de tarjetas de empresa: ejemplo de HTML y CSS

Un código de abfomap

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS