Conteneur d'animation d'objet d'image HTML

316 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Conteneur d'animation d'objet d'image HTML

Recommandé

21 August 2025

Formulaire de connexion et d'inscription (HTML, CSS, JS)

23 August 2025

Modèle HTML de page de connexion turque

24 August 2025

Blog technique : Modèle HTML pour la technologie et les logiciels

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

Recommandé

Formulaire de connexion et d'inscription (HTML, CSS, JS)

Modèle HTML de page de connexion turque

Blog technique : Modèle HTML pour la technologie et les logiciels

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS