Glitch Effect Animation Using Pure CSS

Glitch Effect Animation Using Pure CSS

Glitch Effect Animation Using Pure CSS

Glitch Effect Animation Using Pure CSS
Glitch Effect Animation Using Pure CSS
 
Welcome to the Codewithrandom blog. In this blog, we learn how to create Glitch Effect Animation Using Pure CSS. this is the best Glitch Effect animation you see ever using only Html and Css.I hope you enjoy our blog so let’s start with a basic html structure for Glitch Effect.100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Live Preview Of Glitch Effect Animation

Code byTee
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYES

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
Pure CSS Glitch Animation | Best Glitch Effect Ever - Codewithrandom
 
 

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

Pure CSS Glitch Animation | Best Glitch Effect Ever - Codewithrandom
 
Hope you like the Glitch Effect Animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank youWritten by – Code With Random/AnkiCode by – Tee

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!



Leave a Reply