Contenitore di animazione di oggetti immagine HTML

879 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Contenitore di animazione di oggetti immagine HTML

Consigliato

23 October 2024

Carattere animato VFS Digital Design

24 February 2025

La radio è così lunatica ✅

27 September 2025

Animazione di caricamento CSS: flusso di memoria e riflessione

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

Consigliato

Carattere animato VFS Digital Design

La radio è così lunatica ✅

Animazione di caricamento CSS: flusso di memoria e riflessione

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS