zazaulola · December 3, 2021 17:47
diff --git a/glitch.html b/glitch.html
 <!-- @format -->

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - CSS Glitched Text</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />

    <style>
      /** @noprettify */
      body {
        background: black;
        font-family: 'Varela', sans-serif;
      }

      .glitch {
        color: white;
        font-size: 100px;
        position: relative;
        width: 400px;
        margin: 0 auto;
      }

      @keyframes glitch-1 {
        0% {
          clip: rect(99px, 9999px, 48px, 0);
        }
        5% {
          clip: rect(54px, 9999px, 67px, 0);
        }
        10% {
          clip: rect(89px, 9999px, 43px, 0);
        }
        15% {
          clip: rect(36px, 9999px, 78px, 0);
        }
        20% {
          clip: rect(67px, 9999px, 97px, 0);
        }
        25% {
          clip: rect(63px, 9999px, 7px, 0);
        }
        30% {
          clip: rect(67px, 9999px, 33px, 0);
        }
        35% {
          clip: rect(90px, 9999px, 60px, 0);
        }
        40% {
          clip: rect(93px, 9999px, 46px, 0);
        }
        45% {
          clip: rect(28px, 9999px, 64px, 0);
        }
        50% {
          clip: rect(28px, 9999px, 54px, 0);
        }
        55% {
          clip: rect(72px, 9999px, 67px, 0);
        }
        60% {
          clip: rect(90px, 9999px, 19px, 0);
        }
        65% {
          clip: rect(79px, 9999px, 47px, 0);
        }
        70% {
          clip: rect(89px, 9999px, 58px, 0);
        }
        75% {
          clip: rect(70px, 9999px, 43px, 0);
        }
        80% {
          clip: rect(19px, 9999px, 18px, 0);
        }
        85% {
          clip: rect(6px, 9999px, 84px, 0);
        }
        90% {
          clip: rect(23px, 9999px, 14px, 0);
        }
        95% {
          clip: rect(83px, 9999px, 82px, 0);
        }
        100% {
          clip: rect(59px, 9999px, 60px, 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: glitch-1 2s infinite linear alternate-reverse;
      }

      @keyframes glitch-2 {
        0% {
          clip: rect(52px, 9999px, 58px, 0);
        }
        5% {
          clip: rect(62px, 9999px, 71px, 0);
        }
        10% {
          clip: rect(67px, 9999px, 6px, 0);
        }
        15% {
          clip: rect(73px, 9999px, 57px, 0);
        }
        20% {
          clip: rect(51px, 9999px, 49px, 0);
        }
        25% {
          clip: rect(94px, 9999px, 58px, 0);
        }
        30% {
          clip: rect(8px, 9999px, 31px, 0);
        }
        35% {
          clip: rect(67px, 9999px, 68px, 0);
        }
        40% {
          clip: rect(67px, 9999px, 75px, 0);
        }
        45% {
          clip: rect(15px, 9999px, 40px, 0);
        }
        50% {
          clip: rect(92px, 9999px, 10px, 0);
        }
        55% {
          clip: rect(55px, 9999px, 95px, 0);
        }
        60% {
          clip: rect(49px, 9999px, 14px, 0);
        }
        65% {
          clip: rect(85px, 9999px, 41px, 0);
        }
        70% {
          clip: rect(5px, 9999px, 23px, 0);
        }
        75% {
          clip: rect(44px, 9999px, 92px, 0);
        }
        80% {
          clip: rect(68px, 9999px, 60px, 0);
        }
        85% {
          clip: rect(8px, 9999px, 81px, 0);
        }
        90% {
          clip: rect(83px, 9999px, 38px, 0);
        }
        95% {
          clip: rect(49px, 9999px, 55px, 0);
        }
        100% {
          clip: rect(85px, 9999px, 91px, 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: glitch-2 3s infinite linear alternate-reverse;
      }

    </style>
    <link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </head>
  <body>
    <!-- partial:index.partial.html -->

    <div class="glitch" data-text="GLITCH">GLITCH</div>
    <!-- partial -->
  </body>
 </html>
	<!-- @format -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>CodePen - CSS Glitched Text</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />

	<style>
	/** @noprettify */
	body {
	background: black;
	font-family: 'Varela', sans-serif;
	}

	.glitch {
	color: white;
	font-size: 100px;
	position: relative;
	width: 400px;
	margin: 0 auto;
	}

	@keyframes glitch-1 {
	0% {
	clip: rect(99px, 9999px, 48px, 0);
	}
	5% {
	clip: rect(54px, 9999px, 67px, 0);
	}
	10% {
	clip: rect(89px, 9999px, 43px, 0);
	}
	15% {
	clip: rect(36px, 9999px, 78px, 0);
	}
	20% {
	clip: rect(67px, 9999px, 97px, 0);
	}
	25% {
	clip: rect(63px, 9999px, 7px, 0);
	}
	30% {
	clip: rect(67px, 9999px, 33px, 0);
	}
	35% {
	clip: rect(90px, 9999px, 60px, 0);
	}
	40% {
	clip: rect(93px, 9999px, 46px, 0);
	}
	45% {
	clip: rect(28px, 9999px, 64px, 0);
	}
	50% {
	clip: rect(28px, 9999px, 54px, 0);
	}
	55% {
	clip: rect(72px, 9999px, 67px, 0);
	}
	60% {
	clip: rect(90px, 9999px, 19px, 0);
	}
	65% {
	clip: rect(79px, 9999px, 47px, 0);
	}
	70% {
	clip: rect(89px, 9999px, 58px, 0);
	}
	75% {
	clip: rect(70px, 9999px, 43px, 0);
	}
	80% {
	clip: rect(19px, 9999px, 18px, 0);
	}
	85% {
	clip: rect(6px, 9999px, 84px, 0);
	}
	90% {
	clip: rect(23px, 9999px, 14px, 0);
	}
	95% {
	clip: rect(83px, 9999px, 82px, 0);
	}
	100% {
	clip: rect(59px, 9999px, 60px, 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: glitch-1 2s infinite linear alternate-reverse;
	}

	@keyframes glitch-2 {
	0% {
	clip: rect(52px, 9999px, 58px, 0);
	}
	5% {
	clip: rect(62px, 9999px, 71px, 0);
	}
	10% {
	clip: rect(67px, 9999px, 6px, 0);
	}
	15% {
	clip: rect(73px, 9999px, 57px, 0);
	}
	20% {
	clip: rect(51px, 9999px, 49px, 0);
	}
	25% {
	clip: rect(94px, 9999px, 58px, 0);
	}
	30% {
	clip: rect(8px, 9999px, 31px, 0);
	}
	35% {
	clip: rect(67px, 9999px, 68px, 0);
	}
	40% {
	clip: rect(67px, 9999px, 75px, 0);
	}
	45% {
	clip: rect(15px, 9999px, 40px, 0);
	}
	50% {
	clip: rect(92px, 9999px, 10px, 0);
	}
	55% {
	clip: rect(55px, 9999px, 95px, 0);
	}
	60% {
	clip: rect(49px, 9999px, 14px, 0);
	}
	65% {
	clip: rect(85px, 9999px, 41px, 0);
	}
	70% {
	clip: rect(5px, 9999px, 23px, 0);
	}
	75% {
	clip: rect(44px, 9999px, 92px, 0);
	}
	80% {
	clip: rect(68px, 9999px, 60px, 0);
	}
	85% {
	clip: rect(8px, 9999px, 81px, 0);
	}
	90% {
	clip: rect(83px, 9999px, 38px, 0);
	}
	95% {
	clip: rect(49px, 9999px, 55px, 0);
	}
	100% {
	clip: rect(85px, 9999px, 91px, 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: glitch-2 3s infinite linear alternate-reverse;
	}

	</style>
	<link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	</head>
	<body>
	<!-- partial:index.partial.html -->

	<div class="glitch" data-text="GLITCH">GLITCH</div>
	<!-- partial -->
	</body>
	</html>