CSS Glitched Text

В редакторе

CSS Glitched Text

Brain_Script
51
2021-04-19 03:25:53
<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'> <div class="glitch" data-text="GLITCH">GLITCH</div>
body { background: black; font-family: 'Varela', sans-serif; } .glitch { color: white; font-size: 100px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim { 0% { clip: rect(72px, 9999px, 1px, 0); } 5% { clip: rect(5px, 9999px, 44px, 0); } 10% { clip: rect(82px, 9999px, 26px, 0); } 15% { clip: rect(34px, 9999px, 4px, 0); } 20% { clip: rect(2px, 9999px, 76px, 0); } 25% { clip: rect(81px, 9999px, 96px, 0); } 30% { clip: rect(21px, 9999px, 15px, 0); } 35% { clip: rect(61px, 9999px, 94px, 0); } 40% { clip: rect(9px, 9999px, 30px, 0); } 45% { clip: rect(53px, 9999px, 44px, 0); } 50% { clip: rect(64px, 9999px, 64px, 0); } 55% { clip: rect(63px, 9999px, 20px, 0); } 60% { clip: rect(29px, 9999px, 53px, 0); } 65% { clip: rect(43px, 9999px, 4px, 0); } 70% { clip: rect(1px, 9999px, 44px, 0); } 75% { clip: rect(20px, 9999px, 58px, 0); } 80% { clip: rect(18px, 9999px, 95px, 0); } 85% { clip: rect(10px, 9999px, 71px, 0); } 90% { clip: rect(77px, 9999px, 23px, 0); } 95% { clip: rect(79px, 9999px, 39px, 0); } 100% { clip: rect(46px, 9999px, 4px, 0); } } .glitch:after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 red; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim 2s infinite linear alternate-reverse; } @keyframes noise-anim-2 { 0% { clip: rect(94px, 9999px, 35px, 0); } 5% { clip: rect(52px, 9999px, 43px, 0); } 10% { clip: rect(77px, 9999px, 56px, 0); } 15% { clip: rect(50px, 9999px, 87px, 0); } 20% { clip: rect(98px, 9999px, 98px, 0); } 25% { clip: rect(89px, 9999px, 81px, 0); } 30% { clip: rect(26px, 9999px, 81px, 0); } 35% { clip: rect(82px, 9999px, 29px, 0); } 40% { clip: rect(2px, 9999px, 76px, 0); } 45% { clip: rect(36px, 9999px, 73px, 0); } 50% { clip: rect(18px, 9999px, 84px, 0); } 55% { clip: rect(38px, 9999px, 25px, 0); } 60% { clip: rect(21px, 9999px, 2px, 0); } 65% { clip: rect(12px, 9999px, 84px, 0); } 70% { clip: rect(54px, 9999px, 79px, 0); } 75% { clip: rect(4px, 9999px, 92px, 0); } 80% { clip: rect(44px, 9999px, 97px, 0); } 85% { clip: rect(19px, 9999px, 62px, 0); } 90% { clip: rect(51px, 9999px, 8px, 0); } 95% { clip: rect(24px, 9999px, 52px, 0); } 100% { clip: rect(61px, 9999px, 5px, 0); } } .glitch:before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim-2 3s infinite linear alternate-reverse; }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика