/* A fő logó apró, ritka megugrása */ .logo-base { animation: base-glitch 4s infinite linear; } /* A két elcsúszó, elszíneződő glitch réteg */ .glitch-1 { animation: glitch-anim-1 4s infinite linear alternate-reverse; opacity: 0; } .glitch-2 { animation: glitch-anim-2 4s infinite linear alternate-reverse; opacity: 0; } /* Rendszeres, apró rázkódás a fő logón */ @keyframes base-glitch { 0%, 93%, 97%, 100% { transform: translate(0, 0) skewX(0deg); } 94% { transform: translate(-2px, 1px) skewX(1deg); } 96% { transform: translate(2px, -1px) skewX(-1deg); } } /* Első (ciánosabb) glitch réteg animációja */ @keyframes glitch-anim-1 { 0%, 92%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 0; } 93% { opacity: 0.9; clip-path: inset(10% 0 60% 0); transform: translate(-8px, 3px); filter: hue-rotate(-90deg) saturate(150%); } 95% { opacity: 0.9; clip-path: inset(40% 0 20% 0); transform: translate(8px, -3px); filter: hue-rotate(-90deg) saturate(150%); } 97% { opacity: 0.9; clip-path: inset(80% 0 5% 0); transform: translate(-8px, 0); filter: hue-rotate(-90deg) saturate(150%); } } /* Második (magentásabb) glitch réteg animációja */ @keyframes glitch-anim-2 { 0%, 92%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 0; } 93% { opacity: 0.9; clip-path: inset(20% 0 50% 0); transform: translate(8px, -2px); filter: hue-rotate(90deg) saturate(150%); } 95% { opacity: 0.9; clip-path: inset(60% 0 10% 0); transform: translate(-8px, 2px); filter: hue-rotate(90deg) saturate(150%); } 97% { opacity: 0.9; clip-path: inset(10% 0 70% 0); transform: translate(8px, 0); filter: hue-rotate(90deg) saturate(150%); } }

Velencei-Tó Vlog & Médiaműhely