o enigma do tempo

Abrir no Editor Publique Seu Código

Recomendado

16 November 2024

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #1a1a1a;
            overflow: hidden;
            font-family: monospace;
            color: #fff;
        }
        /*container do relogio */
        .clock-container {
            position: relative;
            width: 200px;
            height: 200px;
        }
        /*relogio pulsando */
        .clock {
            width: 100%;
            height: 100%;
            border: 5px solid #00ff88;
            border-radius: 50%;
            position: relative;
            animation: pulse 4s infinite;
        }
        /*ponteiros */
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            width: 4px;
            background-color: #ff0077;
            transform-origin: bottom;
            animation: dissolve 4s infinite;
        }
        /*ponteiro da hora */
        .hour-hand {
            height: 60px;
            animation-delay: 0.5s;
        }
        /* ponteiro do minuto */
        .minute-hand {
            height: 80px;
            animation-delay: 1s;
        }
        /*codigo depois */
        .code-snippet {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: #00ff88;
            opacity: 0;
            animation: reveal-code 4s infinite;
            white-space: pre;
        }
        /*animações */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.5;
            }
        }

@keyframes dissolve {
            0%, 100% {
                transform: rotate(0deg) translateY(0);
                opacity: 1;
            }
            50% {
                transform: rotate(360deg) translateY(-20px);
                opacity: 0;
            }
        }

@keyframes reveal-code {
            0%, 40% {
                opacity: 0;
            }
            50%, 90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

o enigma do tempo

Recomendado

Cartão Gradiente HTML

Um código por mematixd3162

Formulário de Login Moderno

HTML

CSS

JS

Recomendado

Cartão Gradiente HTML

Um código por mematixd3162

Formulário de Login Moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS