Webleb - fragmentos de código - Contenedor de animación de objetos de imagen HTML

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #242b38; 
      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: #CC3636; }
    .property { color: #6effe7; }
    .value-number { color: #aaccff; }
    .value-string { color: #b4cc88; }
    .value-color { color: #79cc8f; }
    .brace { color: #F8F8F2; }
    .comment { color: #75715E; }
    .function { color: #79cc8f; }
    .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;
    }

/* ---------------------  CSS  CODE TO BE EMBEDDED ---------------------  */
    .animation-container  {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
    }
    .object  {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 5px solid #FFF; 
      box-shadow: 0 8px 16px rgba(0,0,0, 0.4);
      overflow: hidden;
      position: relative; 
      animation: blur_fade 2s infinite ease-in-out alternate; 
    }
    .object::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("//www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");/* Example: blurred logo */
      background-size: contain;
      background-repeat: no-repeat;
      filter: blur(10px); 
      animation: blur_shift 2s infinite linear alternate;
    }

.object img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      animation: pixelate_reveal 2s infinite linear;
    }

/* Anims */ 
    @keyframes blur_fade {
      0% { filter: blur(5px); opacity: 1; }
      50% { filter: blur(10px); opacity: 0.5; }
      100% { filter: blur(5px); opacity: 1; }
    }

@keyframes blur_shift {
      0% { background-position: 0% -8px; }
      50% { background-position: 50% -8px; }
      100% {background-position: 100% -8px; }
    }

@keyframes pixelate_reveal {
      from { transform: scale(0); filter: blur(0) } 
      to { transform: scale(1); filter: blur(4px) } 
    }

Contenedor de animación de objetos de imagen HTML

Recomendado

Nexo de datos de Cyberpunk

Un código de bachir123

Animación de tarjeta

HTML

CSS

JS

Recomendado

Nexo de datos de Cyberpunk

Un código de bachir123

Animación de tarjeta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS