Jardim de falhas

Abrir no Editor Publique Seu Código

Recomendado

20 August 2025

Modelo HTML para blog de design moderno

7 November 2024

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

Jardim de falhas

Recomendado

Modelo HTML para blog de design moderno

alternar com animação de luz

Um código de Mete

HTML

CSS

JS

Recomendado

Modelo HTML para blog de design moderno

alternar com animação de luz

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS