formas mágicas en crecimiento

911 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

30 November 2024

Menú de navegación de Coreboot

10 July 2025

Plantilla de menú de restaurante HTML

15 December 2023

Juego de Pilas en JavaScript

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #000;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }
        /*container */
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* shape */
        .shape {
            position: absolute;
            border-radius: 50%;
            animation: grow 4s ease-in-out infinite;
        }
        /*  circulo */
        .shape-1 {
            translate: -100% -100%;
            width: 50px;
            height: 50px;
            background: linear-gradient(45deg, #ff0080, #ff8000);
            animation-delay: 0s;
        }
        /*quadrado com bordas arredondadas */
        .shape-2 {
            translate: 100% 100%;
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #00ff80, #0080ff);
            animation-delay: 0.5s;
            border-radius: 20px;
        }
        /*quadrado  */
        .shape-3 {
            translate: -100% 100%;
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #8000ff, #ff0080);
            animation-delay: 1s;
            border-radius: 0;
            transform: rotate(45deg);
        }
        /*clip path do triangulo */
        .shape-4 {
            translate: 100% -100%;
            width: 70px;
            height: 70px;
            background: linear-gradient(45deg, #ffff00, #ff8000);
            animation-delay: 1.5s;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            border-radius: 0;
        }

/*clip path da estrela */
        .shape-5 {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #ff4080, #8040ff);
            animation-delay: 2.5s;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            border-radius: 0;
        }
        /*animacao das formas */
        @keyframes grow {
            0% {
                transform: scale(0);
                opacity: 0;
                filter: blur(10px);
            }
            25% {
                transform: scale(0.5);
                opacity: 0.7;
                filter: blur(5px);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
                filter: blur(0px);
                box-shadow: 0 0 30px currentColor;
            }
            100% {
                transform: scale(0) rotate(360deg);
                opacity: 0;
                filter: blur(10px);
            }
        }
        /*apenas para o video, pode remover */
        .codigo {
            position: absolute;
            top: 0;
            line-height: 1.6;
            text-align: left;
            color: #F8F8F2; 
            max-width: 570px;
            background: #272822; 
            padding: 20px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            white-space: pre-line;
            font-size: 14px;
        }

.selector { color: #F92672; } 
        .property { color: #66D9EF; }
        .value-number { color: #AE81FF; } 
        .value-string { color: #E6DB74; } 
        .value-color { color: #A6E22E; } 
        .brace { color: #F8F8F2; } 
        .comment { color: #75715E; } 
        .function { color: #A6E22E; }

Recomendado

Menú de navegación de Coreboot

Plantilla de menú de restaurante HTML

Juego de Pilas en JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS