Struttura HTML del contenitore di animazione CSS

110 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Struttura HTML del contenitore di animazione CSS

Consigliato

21 July 2025

Esempio HTML CSS della carta UNO

13 June 2025

Un codice di ashimadison8

2 July 2025

Tastiera virtuale HTML CSS JavaScript

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

Consigliato

Esempio HTML CSS della carta UNO

Un codice di ashimadison8

Tastiera virtuale HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS