Estructura HTML del contenedor de animación CSS

568 ByBy.inc

Abrir en el editor Publica tu código

Estructura HTML del contenedor de animación CSS

Recomendado

17 November 2025

Un código de Mete

1 March 2023

Formulario de inicio de sesión con CSS

3 July 2025

Ejemplo de código de menú desplegable HTML

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

Un código de Mete

Formulario de inicio de sesión con CSS

Ejemplo de código de menú desplegable HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS