@keyframes glitch-main { 0%,94%,100% { transform: translate(0,0) skewX(0deg); clip-path: none; opacity:1; } 95% { transform: translate(-4px, 1px) skewX(-2deg); clip-path: inset(20% 0 60% 0); opacity:.9; } 96% { transform: translate(4px,-1px) skewX(1deg); clip-path: inset(55% 0 10% 0); opacity:1; } 97% { transform: translate(-2px, 2px) skewX(3deg); clip-path: inset(5% 0 80% 0); opacity:.85; } 98% { transform: translate(3px, 0px) skewX(-1deg); clip-path: none; opacity:1; } } @keyframes glitch-red { 0%,94%,100% { transform: translate(0,0); opacity:0; } 95% { transform: translate(-6px, 0); opacity:.45; } 96% { transform: translate(5px, 1px); opacity:.35; } 97% { transform: translate(-3px,-1px); opacity:.4; } 98% { transform: translate(0,0); opacity:0; } } @keyframes glitch-cyan { 0%,94%,100% { transform: translate(0,0); opacity:0; } 95% { transform: translate(5px,-1px); opacity:.35; } 96% { transform: translate(-4px, 1px); opacity:.3; } 97% { transform: translate(2px, 2px); opacity:.4; } 98% { transform: translate(0,0); opacity:0; } } @keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } } .raw-logo-wrap { position:relative; display:inline-block; } .raw-logo-img { animation: glitch-main 6s steps(1) infinite; } .raw-logo-wrap::before, .raw-logo-wrap::after { content:''; position:absolute; inset:0; background-image: url('/images/raw.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events:none; } .raw-logo-wrap::before { mix-blend-mode: screen; filter: url("data:image/svg+xml,#r"); animation: glitch-red 6s steps(1) infinite; } .raw-logo-wrap::after { mix-blend-mode: screen; filter: url("data:image/svg+xml,#c"); animation: glitch-cyan 6s steps(1) infinite; }

Próximos eventos

Ediciones pasadas