Jardin des glitchs

1,116 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 April 2026

Liste des fichiers UGS avec barre latérale et fonction de recherche

24 August 2025

Curseur accordéon HTML des spécifications de la voiture

19 May 2026

Charger du code HTML et des scripts externes via l'API Fetch

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.animation-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }

/* Glitching Elements */
    .glitch {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      transform: translate3d(0, 0, 0);
      background-color: hsl(0deg, 0%, 50%);
      animation: glitch 2s linear infinite;
    }

@keyframes glitch {
      0%, 100% {
        transform: translate3d(0, 0, 0);
      }
      25% {
        transform: translate3d(-10px, 0, 0);
      }
      50% {
        transform: translate3d(0, 10px, 0);
      }
      75% {
        transform: translate3d(10px, 0, 0);
      }
    }

/* Multiple Glitching Elements */
    .glitch-container {
      display: flex;
      justify-content: space-around;
    }

.glitch2, .glitch3, .glitch4 {
      width: 80px; 
      height: 80px;
    }

.glitch-container .glitch::before { /* Just making the glitch more noticeable */
      content: "";
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      background: linear-gradient(hsla(0, 0%, 70%, 0.4), hsla(0, 0%, 100%, 0.1)); 
      transform: skewX(20deg); 
      opacity: 0.8;
      z-index: -10;
    }