Estructura HTML del contenedor de animación CSS

931 byby.createsite

Abrir en el editor Video Publica tu código

Estructura HTML del contenedor de animación CSS

Recomendado

7 December 2024

Un código de efficientcloud646

26 December 2024

Un código de logicalarray833

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

Estructura HTML del contenedor de animación CSS

Recomendado

Un código de slowlogic9

Un código de efficientcloud646

Un código de logicalarray833

HTML

CSS

JS

Recomendado

Un código de slowlogic9

Un código de efficientcloud646

Un código de logicalarray833

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS