Jardín de fallas

1,115 byby.createsite

Abrir en el editor Publica tu código

Recomendado

15 May 2025

El código de Mete

22 June 2025

Ejemplo de formulario de inicio de sesión HTML

13 June 2025

Un código de Metehan

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