Webleb - Snippets de Código - Contêiner de animação de objeto de imagem 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) } 
    }

Contêiner de animação de objeto de imagem HTML

Recomendado

Um código de cleanbug411

Um Código de Metehan

gerador de citações

HTML

CSS

JS

Recomendado

Um código de cleanbug411

Um Código de Metehan

gerador de citações

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS