CSS Glitch
How do I make an css glitch?
CSS hacked/glitch effect. What is a css glitch? How do you make a css glitch? This script and codes were developed by Bramus on 23 July 2022, Saturday.
CSS Glitch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Glitch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- extracted from (and improved upon) http://www.theverge.com/a/anatomy-of-a-hack -->
<h2 class="glitch heading" data-text="CSS GLITCH">CSS GLITCH</h2>
</body>
</html>
CSS Glitch - Script Codes CSS Codes
@keyframes noise-anim
{ 0% { clip: rect(21px, 9999px, 57px, 0); } 5% { clip: rect(21px, 9999px, 80px, 0); } 10% { clip: rect(55px, 9999px, 69px, 0); } 15.0% { clip: rect(22px, 9999px, 55px, 0); } 20% { clip: rect(38px, 9999px, 69px, 0); } 25% { clip: rect(31px, 9999px, 84px, 0); } 30.0% { clip: rect(15px, 9999px, 28px, 0); } 35% { clip: rect(16px, 9999px, 100px, 0); } 40% { clip: rect(25px, 9999px, 10px, 0); } 45% { clip: rect(19px, 9999px, 19px, 0); } 50% { clip: rect(71px, 9999px, 35px, 0); } 55.0% { clip: rect(89px, 9999px, 21px, 0); } 60.0% { clip: rect(20px, 9999px, 34px, 0); } 65% { clip: rect(22px, 9999px, 61px, 0); } 70% { clip: rect(65px, 9999px, 28px, 0); } 75% { clip: rect(82px, 9999px, 47px, 0); } 80% { clip: rect(64px, 9999px, 11px, 0); } 85.0% { clip: rect(63px, 9999px, 28px, 0); } 90% { clip: rect(60px, 9999px, 60px, 0); } 95% { clip: rect(9px, 9999px, 90px, 0); } 100% { clip: rect(40px, 9999px, 62px, 0); }
}
@keyframes noise-anim-2
{ 0% { clip: rect(77px, 9999px, 63px, 0); } 5% { clip: rect(7px, 9999px, 6px, 0); } 10% { clip: rect(82px, 9999px, 78px, 0); } 15.0% { clip: rect(85px, 9999px, 25px, 0); } 20% { clip: rect(93px, 9999px, 38px, 0); } 25% { clip: rect(70px, 9999px, 96px, 0); } 30.0% { clip: rect(41px, 9999px, 72px, 0); } 35% { clip: rect(39px, 9999px, 65px, 0); } 40% { clip: rect(36px, 9999px, 34px, 0); } 45% { clip: rect(84px, 9999px, 96px, 0); } 50% { clip: rect(99px, 9999px, 45px, 0); } 55.0% { clip: rect(37px, 9999px, 73px, 0); } 60.0% { clip: rect(63px, 9999px, 20px, 0); } 65% { clip: rect(55px, 9999px, 44px, 0); } 70% { clip: rect(58px, 9999px, 11px, 0); } 75% { clip: rect(61px, 9999px, 82px, 0); } 80% { clip: rect(60px, 9999px, 9px, 0); } 85.0% { clip: rect(37px, 9999px, 69px, 0); } 90% { clip: rect(32px, 9999px, 64px, 0); } 95% { clip: rect(63px, 9999px, 16px, 0); } 100% { clip: rect(47px, 9999px, 34px, 0); }
}
@-webkit-keyframes noise-anim
{ 0% { clip: rect(61px, 9999px, 72px, 0); } 5% { clip: rect(65px, 9999px, 83px, 0); } 10% { clip: rect(21px, 9999px, 68px, 0); } 15.0% { clip: rect(99px, 9999px, 51px, 0); } 20% { clip: rect(41px, 9999px, 79px, 0); } 25% { clip: rect(33px, 9999px, 65px, 0); } 30.0% { clip: rect(38px, 9999px, 71px, 0); } 35% { clip: rect(49px, 9999px, 18px, 0); } 40% { clip: rect(70px, 9999px, 6px, 0); } 45% { clip: rect(47px, 9999px, 45px, 0); } 50% { clip: rect(74px, 9999px, 90px, 0); } 55.0% { clip: rect(33px, 9999px, 8px, 0); } 60.0% { clip: rect(77px, 9999px, 10px, 0); } 65% { clip: rect(53px, 9999px, 43px, 0); } 70% { clip: rect(74px, 9999px, 24px, 0); } 75% { clip: rect(91px, 9999px, 40px, 0); } 80% { clip: rect(82px, 9999px, 20px, 0); } 85.0% { clip: rect(70px, 9999px, 30px, 0); } 90% { clip: rect(50px, 9999px, 31px, 0); } 95% { clip: rect(63px, 9999px, 52px, 0); } 100% { clip: rect(79px, 9999px, 57px, 0); }
}
@-webkit-keyframes noise-anim-2
{ 0% { clip: rect(62px, 9999px, 69px, 0); } 5% { clip: rect(33px, 9999px, 27px, 0); } 10% { clip: rect(86px, 9999px, 3px, 0); } 15.0% { clip: rect(69px, 9999px, 65px, 0); } 20% { clip: rect(87px, 9999px, 58px, 0); } 25% { clip: rect(80px, 9999px, 55px, 0); } 30.0% { clip: rect(46px, 9999px, 69px, 0); } 35% { clip: rect(39px, 9999px, 93px, 0); } 40% { clip: rect(1px, 9999px, 73px, 0); } 45% { clip: rect(35px, 9999px, 75px, 0); } 50% { clip: rect(89px, 9999px, 97px, 0); } 55.0% { clip: rect(30px, 9999px, 53px, 0); } 60.0% { clip: rect(63px, 9999px, 100px, 0); } 65% { clip: rect(22px, 9999px, 19px, 0); } 70% { clip: rect(30px, 9999px, 100px, 0); } 75% { clip: rect(46px, 9999px, 45px, 0); } 80% { clip: rect(62px, 9999px, 50px, 0); } 85.0% { clip: rect(35px, 9999px, 84px, 0); } 90% { clip: rect(38px, 9999px, 61px, 0); } 95% { clip: rect(63px, 9999px, 18px, 0); } 100% { clip: rect(42px, 9999px, 29px, 0); }
}
@-moz-keyframes noise-anim
{ 0% { clip: rect(80px, 9999px, 30px, 0); } 5% { clip: rect(92px, 9999px, 43px, 0); } 10% { clip: rect(94px, 9999px, 28px, 0); } 15.0% { clip: rect(22px, 9999px, 60px, 0); } 20% { clip: rect(12px, 9999px, 6px, 0); } 25% { clip: rect(55px, 9999px, 65px, 0); } 30.0% { clip: rect(40px, 9999px, 78px, 0); } 35% { clip: rect(66px, 9999px, 39px, 0); } 40% { clip: rect(86px, 9999px, 62px, 0); } 45% { clip: rect(75px, 9999px, 66px, 0); } 50% { clip: rect(9px, 9999px, 67px, 0); } 55.0% { clip: rect(30px, 9999px, 5px, 0); } 60.0% { clip: rect(41px, 9999px, 40px, 0); } 65% { clip: rect(10px, 9999px, 96px, 0); } 70% { clip: rect(98px, 9999px, 50px, 0); } 75% { clip: rect(28px, 9999px, 4px, 0); } 80% { clip: rect(92px, 9999px, 58px, 0); } 85.0% { clip: rect(11px, 9999px, 13px, 0); } 90% { clip: rect(44px, 9999px, 36px, 0); } 95% { clip: rect(29px, 9999px, 75px, 0); } 100% { clip: rect(56px, 9999px, 39px, 0); }
}
@-moz-keyframes noise-anim-2
{ 0% { clip: rect(13px, 9999px, 50px, 0); } 5% { clip: rect(52px, 9999px, 68px, 0); } 10% { clip: rect(49px, 9999px, 80px, 0); } 15.0% { clip: rect(98px, 9999px, 41px, 0); } 20% { clip: rect(89px, 9999px, 29px, 0); } 25% { clip: rect(66px, 9999px, 91px, 0); } 30.0% { clip: rect(100px, 9999px, 29px, 0); } 35% { clip: rect(40px, 9999px, 29px, 0); } 40% { clip: rect(44px, 9999px, 89px, 0); } 45% { clip: rect(74px, 9999px, 18px, 0); } 50% { clip: rect(6px, 9999px, 74px, 0); } 55.0% { clip: rect(4px, 9999px, 28px, 0); } 60.0% { clip: rect(87px, 9999px, 56px, 0); } 65% { clip: rect(100px, 9999px, 6px, 0); } 70% { clip: rect(72px, 9999px, 77px, 0); } 75% { clip: rect(40px, 9999px, 1px, 0); } 80% { clip: rect(81px, 9999px, 61px, 0); } 85.0% { clip: rect(23px, 9999px, 81px, 0); } 90% { clip: rect(52px, 9999px, 24px, 0); } 95% { clip: rect(12px, 9999px, 60px, 0); } 100% { clip: rect(66px, 9999px, 69px, 0); }
}
text,rect,line,polyline
{ moz-transition-duration: 0.2s; o-transition-duration: 0.2s; webkit-transition-duration: 0.2s; transition-duration: 0.2s;
}
text
{ pointer-events: none;
}
.glitch
{ position: relative; display: inline-block; text-transform: uppercase;
}
.glitch:after
{ clip: rect(0, 100%, 0, 0); content: attr(data-text); left: 0; /* Was 1px */ overflow: hidden; position: absolute; text-shadow: -1px 0 #ab77a9; top: 0; webkit-animation: noise-anim 2s infinite linear alternate-reverse; moz-animation: noise-anim 2s infinite linear alternate-reverse; animation: noise-anim 2s infinite linear alternate-reverse;
}
.glitch:before
{ animation: noise-anim-2 3s infinite linear alternate-reverse; clip: rect(0, 100%, 0, 0); content: attr(data-text); top: 0; left: 0; moz-animation: noise-anim-2 2s infinite linear alternate-reverse; overflow: hidden; position: absolute; text-shadow: 2px 0 #05d003; webkit-animation: noise-anim-2 2s infinite linear alternate-reverse;
}
.heading:before
{ transform: translateX(-1px); text-shadow: 1px 0 #a10897;
}
.heading:after
{ transform: translateX(1px); text-shadow: -1px 0 #05d003;
}
body { font-size: 100px; text-align: center;
}
Developer | Bramus |
Username | bramus |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 2,699 Kb |
Views | 48,576 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple Flexbox Grid System | 7,705 Kb |
Pythagoras | 3,197 Kb |
Skrollr basic implementation, alternative | 2,611 Kb |
Scrolling Horizontal Isotope | 2,017 Kb |
CSS block formatting context | 2,057 Kb |
Photosphere Demo | 1,922 Kb |
Bouncing Ball Animation | 5,013 Kb |
Simplest CSS Slideshow | 1,994 Kb |
SVG SMIL Logo Animation | 3,788 Kb |
Scroll Animations | 3,466 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Sticky div | Kaslab | 2,225 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!