Canlı Önizleme
GLITCH
Nasıl Kullanılır?
Yazının içerisindeki 'data-text' attiribute'ı içindeki değerle yazının içindeki değerin birebir aynı olması gerekmektedir.
Kaynak Kodlar
HTML
<div class="glitch" data-text="GLITCH">GLITCH</div>CSS
.glitch { font-size: 80px; font-weight: bold; position: relative; color: white; font-family: 'Inter', sans-serif; letter-spacing: 5px; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -2px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1; animation: glitch-anim2 1s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { clip: rect(74px, 9999px, 86px, 0); } 20% { clip: rect(10px, 9999px, 83px, 0); } 40% { clip: rect(31px, 9999px, 73px, 0); } 60% { clip: rect(5px, 9999px, 46px, 0); } 80% { clip: rect(69px, 9999px, 4px, 0); } 100% { clip: rect(54px, 9999px, 71px, 0); } }
@keyframes glitch-anim2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 20% { clip: rect(3px, 9999px, 5px, 0); } 40% { clip: rect(55px, 9999px, 69px, 0); } 60% { clip: rect(16px, 9999px, 20px, 0); } 80% { clip: rect(29px, 9999px, 86px, 0); } 100% { clip: rect(44px, 9999px, 5px, 0); } }