Conteneur d'animation d'objet d'image HTML

26 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Conteneur d'animation d'objet d'image HTML

Recommandé

18 October 2024

Modèle de site Web de portefeuille HTML CSS

11 March 2025

Formulaire de connexion HTML avancé

9 December 2024

Effet d'animation de survol HTML CSS et Javascript

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é

Modèle de site Web de portefeuille HTML CSS

Formulaire de connexion HTML avancé

Effet d'animation de survol HTML CSS et Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS