Glitch Effect Animation Using Pure CSS
Glitch Effect Animation Using Pure CSS
Live Preview Of Glitch Effect Animation
Code by | Tee |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | NO |
Responsive | YES |
HTML Code For Glitch Effect Animation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Glitch</title> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="glitch" data-text="Codewithrandom">Codewithrandom</div> <div class="glow">Codewithrandom</div> <p class="subtitle">Frontend Developer | Anki</p> </div> <div class="scanlines"></div> </body> </html>There is all the html code for the Glitch effect. Now, you can see output without Css, then we write Css for the Glitch Animation.Restaurant Website Using HTML and CSSOutput
CSS Code For Glitch Effect Animation
body { background: black; font-family: "Oswald", sans-serif; font-style: italic; } .container { position: absolute; transform: translate(-50%, -50%); top: 40%; left: 50%; } .glitch, .glow { color: #dfbfbf; position: relative; font-size: 9vw; animation: glitch 5s 5s infinite; } .glitch::before, .glow::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: -5px 0 magenta; background: black; overflow: hidden; top: 0; animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite; } .glitch::after, .glow::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -5px 0 lightgreen; background: black; overflow: hidden; top: 0; animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; } @keyframes glitch { 1% { transform: rotateX(10deg) skewX(90deg); } 2% { transform: rotateX(0deg) skewX(0deg); } } @keyframes noise-1 { 3.3333333333% { clip-path: inset(11px 0 5px 0); } 6.6666666667% { clip-path: inset(88px 0 5px 0); } 10% { clip-path: inset(76px 0 6px 0); } 13.3333333333% { clip-path: inset(42px 0 31px 0); } 16.6666666667% { clip-path: inset(77px 0 19px 0); } 20% { clip-path: inset(8px 0 27px 0); } 23.3333333333% { clip-path: inset(51px 0 28px 0); } 26.6666666667% { clip-path: inset(53px 0 41px 0); } 30% { clip-path: inset(93px 0 4px 0); } 33.3333333333% { clip-path: inset(51px 0 43px 0); } 36.6666666667% { clip-path: inset(5px 0 55px 0); } 40% { clip-path: inset(93px 0 5px 0); } 43.3333333333% { clip-path: inset(83px 0 9px 0); } 46.6666666667% { clip-path: inset(59px 0 14px 0); } 50% { clip-path: inset(32px 0 65px 0); } 53.3333333333% { clip-path: inset(41px 0 8px 0); } 56.6666666667% { clip-path: inset(76px 0 18px 0); } 60% { clip-path: inset(22px 0 15px 0); } 63.3333333333% { clip-path: inset(7px 0 87px 0); } 66.6666666667% { clip-path: inset(24px 0 61px 0); } 70% { clip-path: inset(7px 0 67px 0); } 73.3333333333% { clip-path: inset(75px 0 22px 0); } 76.6666666667% { clip-path: inset(87px 0 8px 0); } 80% { clip-path: inset(57px 0 17px 0); } 83.3333333333% { clip-path: inset(32px 0 66px 0); } 86.6666666667% { clip-path: inset(96px 0 3px 0); } 90% { clip-path: inset(24px 0 54px 0); } 93.3333333333% { clip-path: inset(97px 0 3px 0); } 96.6666666667% { clip-path: inset(45px 0 28px 0); } 100% { clip-path: inset(49px 0 2px 0); } } @keyframes noise-2 { 0% { clip-path: inset(81px 0 7px 0); } 3.3333333333% { clip-path: inset(74px 0 22px 0); } 6.6666666667% { clip-path: inset(37px 0 48px 0); } 10% { clip-path: inset(46px 0 32px 0); } 13.3333333333% { clip-path: inset(84px 0 9px 0); } 16.6666666667% { clip-path: inset(50px 0 51px 0); } 20% { clip-path: inset(82px 0 10px 0); } 23.3333333333% { clip-path: inset(4px 0 51px 0); } 26.6666666667% { clip-path: inset(8px 0 84px 0); } 30% { clip-path: inset(45px 0 53px 0); } 33.3333333333% { clip-path: inset(35px 0 22px 0); } 36.6666666667% { clip-path: inset(11px 0 81px 0); } 40% { clip-path: inset(5px 0 42px 0); } 43.3333333333% { clip-path: inset(46px 0 44px 0); } 46.6666666667% { clip-path: inset(41px 0 9px 0); } 50% { clip-path: inset(65px 0 17px 0); } 53.3333333333% { clip-path: inset(33px 0 61px 0); } 56.6666666667% { clip-path: inset(74px 0 9px 0); } 60% { clip-path: inset(77px 0 10px 0); } 63.3333333333% { clip-path: inset(16px 0 62px 0); } 66.6666666667% { clip-path: inset(22px 0 16px 0); } 70% { clip-path: inset(8px 0 5px 0); } 73.3333333333% { clip-path: inset(89px 0 4px 0); } 76.6666666667% { clip-path: inset(67px 0 25px 0); } 80% { clip-path: inset(21px 0 6px 0); } 83.3333333333% { clip-path: inset(86px 0 2px 0); } 86.6666666667% { clip-path: inset(48px 0 49px 0); } 90% { clip-path: inset(59px 0 18px 0); } 93.3333333333% { clip-path: inset(56px 0 10px 0); } 96.6666666667% { clip-path: inset(91px 0 9px 0); } 100% { clip-path: inset(3px 0 46px 0); } } .scanlines { overflow: hidden; mix-blend-mode: difference; } .scanlines::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%); animation: fudge 7s ease-in-out alternate infinite; } @keyframes fudge { from { transform: translate(0px, 0px); } to { transform: translate(0px, 2%); } } .glow { text-shadow: 0 0 1000px #dfbfbf; color: transparent; position: absolute; top: 0; } .subtitle { font-family: Arial, Helvetica, sans-serif; font-weight: 100; font-size: 0.8vw; color: rgba(165, 141, 141, 0.4); text-transform: uppercase; letter-spacing: 1em; text-align: center; position: absolute; left: 17%; animation: glitch-2 5s 5.02s infinite; } @keyframes glitch-2 { 1% { transform: rotateX(10deg) skewX(70deg); } 2% { transform: rotateX(0deg) skewX(0deg); } }We have completed our Css Code for Glitch Effect Animation.Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Final Output Of Glitch Effect Using Css
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!