Perfil animado y notificación CSS

643 byby.createsite

Abrir en el editor Publica tu código

Recomendado

11 September 2025

Ejemplo de bloque de código de animación CSS

10 December 2024

Clon de Spotify

13 October 2025

Elementos HTML del contenedor de animación CSS

HTML

CSS

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

body {
    background-color: #1F2434;
    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: 50%;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

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

.animation-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath opacity='0.1' fill='none' stroke='%23c0df9e' stroke-width='10' d='M0 0 L100 0 L100 100 L0 100 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center / cover;
    animation: scroll-warp 10s linear infinite; 
}

@keyframes scroll-warp {
  0% { transform: translateY(-50%) translateX(-50%) scale(1); }
  50% { transform: translateY(0) translateX(0) scale(1.1); }
  100% { transform: translateY(50%) translateX(50%) scale(1); }
}

Recomendado

Ejemplo de bloque de código de animación CSS

Clon de Spotify

Elementos HTML del contenedor de animación CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS