Structure HTML du conteneur d'animation CSS

933 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Structure HTML du conteneur d'animation CSS

Recommandé

23 August 2025

Page de connexion turque HTML : formulaire de connexion

28 August 2025

Site Web d'architecture et de conception avec Tailwind CSS

19 December 2025

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

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

Recommandé

Page de connexion turque HTML : formulaire de connexion

Site Web d'architecture et de conception avec Tailwind CSS

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS