@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; } } .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/logo.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; } @keyframes holo-jitter { 0%, 88%, 100% { transform: translate(0, 0) skewX(0deg); filter: blur(0); } 89% { transform: translate(-3px, 0) skewX(-3deg); filter: blur(0.5px); } 90% { transform: translate(4px, -1px) skewX(3deg); filter: blur(0.9px); } 91% { transform: translate(-2px, 1px) skewX(-2deg); filter: blur(0.35px); } 92% { transform: translate(3px, 0) skewX(2deg); filter: blur(0.8px); } } @keyframes holo-cut { 0%, 87%, 100% { clip-path: inset(0 0 0 0); } 88% { clip-path: inset(8% 0 72% 0); } 89% { clip-path: inset(64% 0 8% 0); } 90% { clip-path: inset(35% 0 42% 0); } 91% { clip-path: inset(75% 0 5% 0); } } @keyframes holo-rgb-r { 0%, 88%, 100% { transform: translate(0, 0); opacity: 0; } 89% { transform: translate(-6px, 0); opacity: .72; } 90% { transform: translate(4px, 1px); opacity: .56; } 91% { transform: translate(-3px, -1px); opacity: .64; } } @keyframes holo-rgb-c { 0%, 88%, 100% { transform: translate(0, 0); opacity: 0; } 89% { transform: translate(6px, -1px); opacity: .68; } 90% { transform: translate(-4px, 1px); opacity: .52; } 91% { transform: translate(3px, 0); opacity: .6; } } @keyframes holo-flicker { 0%, 86%, 100% { opacity: 1; } 87% { opacity: .82; } 88% { opacity: .96; } 89% { opacity: .7; } 90% { opacity: .92; } 91% { opacity: .75; } 92% { opacity: .98; } } @keyframes holo-scan { 0% { background-position: 0 0; } 100% { background-position: 0 120px; } } .tv-title-wrap { position: relative; display: inline-block; isolation: isolate; margin-top: 0; line-height: 0.94; padding-bottom: 0.08em; } .tv-title-label { margin-top: 0.45rem; } @media (min-width: 640px) { .tv-title-label { margin-top: 0.7rem; } } .tv-title-base { position: relative; z-index: 2; display: block; color: #f5f3ff; text-shadow: 0 0 12px rgb(139 92 246 / 0.45), 0 0 36px rgb(139 92 246 / 0.22); animation: holo-jitter 3.6s steps(1) infinite, holo-flicker 3.6s steps(1) infinite; } .tv-title-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: block; } .tv-title-layer--r { color: rgb(196 181 253 / 0.8); mix-blend-mode: screen; animation: holo-rgb-r 3.6s steps(1) infinite, holo-cut 3.6s steps(1) infinite; } .tv-title-layer--c { color: rgb(34 211 238 / 0.68); mix-blend-mode: screen; animation: holo-rgb-c 3.6s steps(1) infinite, holo-cut 3.6s steps(1) infinite; } .tv-title-scan { position: absolute; inset: -2px; z-index: 3; pointer-events: none; background-image: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.07) 0, rgb(255 255 255 / 0.07) 1px, transparent 1px, transparent 3px); mix-blend-mode: soft-light; animation: holo-scan 2.3s linear infinite; }

Ediciones pasadas