Glitch Pop

Developer
Noah Blon
Size
4,644 Kb
Views
36,432
  1. Glitch Pop Previews
  2. Glitch Pop HTML Codes
  3. Glitch Pop CSS Codes

How do I make an glitch pop?

Techno image effect with CSS blend modes, filters, step animation, and much help from Codepen's random Sass function.. What is a glitch pop? How do you make a glitch pop? This script and codes were developed by Noah Blon on 24 June 2022, Friday.

Glitch Pop Previews
IQ Test

Glitch Pop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glitch Pop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Glitch Pop - Script Codes CSS Codes

html { background-color: black; -webkit-animation: spazz 7s steps(1) infinite; animation: spazz 7s steps(1) infinite;
}
body { overflow: hidden; height: 100vh; margin: 0; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/marilyn.jpg) 50%/cover; background-blend-mode: multiply; -webkit-animation: inherit; animation: inherit; -webkit-animation-duration: 17s; animation-duration: 17s;
}
@-webkit-keyframes spazz { 0% { -webkit-filter: hue-rotate(298.8deg) brightness(50.5%); filter: hue-rotate(298.8deg) brightness(50.5%); background-color: #ff6687; -webkit-transform: translate(-12px, 9px) scale(1.2); transform: translate(-12px, 9px) scale(1.2); } 2% { -webkit-filter: saturate(2.62) hue-rotate(165.6deg); filter: saturate(2.62) hue-rotate(165.6deg); background-color: #c966ff; -webkit-transform: translate(-9px, 0px) scale(1.09); transform: translate(-9px, 0px) scale(1.09); } 5% { -webkit-filter: hue-rotate(54deg) contrast(2.89); filter: hue-rotate(54deg) contrast(2.89); background-color: #66ffd9; -webkit-transform: translate(-4px, 12px) scale(1.17); transform: translate(-4px, 12px) scale(1.17); } 8% { -webkit-filter: hue-rotate(324deg); filter: hue-rotate(324deg); background-color: #66ffad; -webkit-transform: translate(13px, 1px) scale(1.2); transform: translate(13px, 1px) scale(1.2); } 12% { -webkit-filter: hue-rotate(176.4deg) contrast(2.17); filter: hue-rotate(176.4deg) contrast(2.17); background-color: #ffed66; -webkit-transform: translate(-13px, 1px) scale(1.24); transform: translate(-13px, 1px) scale(1.24); } 13% { -webkit-filter: hue-rotate(327.6deg); filter: hue-rotate(327.6deg); background-color: #66ffb5; -webkit-transform: translate(9px, 9px) scale(1.21); transform: translate(9px, 9px) scale(1.21); } 14% { -webkit-filter: hue-rotate(219.6deg); filter: hue-rotate(219.6deg); background-color: #f2ff66; -webkit-transform: translate(-3px, -6px) scale(1.08); transform: translate(-3px, -6px) scale(1.08); } 15% { -webkit-filter: hue-rotate(129.6deg); filter: hue-rotate(129.6deg); background-color: #8566ff; -webkit-transform: translate(9px, 14px) scale(1.2); transform: translate(9px, 14px) scale(1.2); } 17% { -webkit-filter: hue-rotate(10.8deg) contrast(7.48); filter: hue-rotate(10.8deg) contrast(7.48); background-color: #66a6ff; -webkit-transform: translate(-7px, 7px) scale(1.24); transform: translate(-7px, 7px) scale(1.24); } 19% { -webkit-filter: hue-rotate(111.6deg) contrast(5.77); filter: hue-rotate(111.6deg) contrast(5.77); background-color: #66e3ff; -webkit-transform: translate(-6px, 9px) scale(1.07); transform: translate(-6px, 9px) scale(1.07); } 20% { -webkit-filter: saturate(7.57) hue-rotate(61.2deg); filter: saturate(7.57) hue-rotate(61.2deg); background-color: #66ffb3; -webkit-transform: translate(2px, 12px) scale(1.17); transform: translate(2px, 12px) scale(1.17); } 21% { -webkit-filter: hue-rotate(82.8deg); filter: hue-rotate(82.8deg); background-color: #ff66a1; -webkit-transform: translate(12px, -6px) scale(1.25); transform: translate(12px, -6px) scale(1.25); } 22% { -webkit-filter: hue-rotate(234deg) contrast(9.55); filter: hue-rotate(234deg) contrast(9.55); background-color: #ff6673; -webkit-transform: translate(-12px, 12px) scale(1.23); transform: translate(-12px, 12px) scale(1.23); } 23% { -webkit-filter: hue-rotate(39.6deg); filter: hue-rotate(39.6deg); background-color: #66c4ff; -webkit-transform: translate(9px, -12px) scale(1.24); transform: translate(9px, -12px) scale(1.24); } 24% { -webkit-filter: hue-rotate(36deg); filter: hue-rotate(36deg); background-color: #ff6669; -webkit-transform: translate(-7px, 15px) scale(1.07); transform: translate(-7px, 15px) scale(1.07); } 25% { -webkit-filter: hue-rotate(237.6deg); filter: hue-rotate(237.6deg); background-color: #d466ff; -webkit-transform: translate(-11px, -11px) scale(1.16); transform: translate(-11px, -11px) scale(1.16); } 26% { -webkit-filter: hue-rotate(79.2deg); filter: hue-rotate(79.2deg); background-color: #ba66ff; -webkit-transform: translate(7px, -4px) scale(1.25); transform: translate(7px, -4px) scale(1.25); } 27% { -webkit-filter: hue-rotate(136.8deg); filter: hue-rotate(136.8deg); background-color: #ff666e; -webkit-transform: translate(-12px, 10px) scale(1.12); transform: translate(-12px, 10px) scale(1.12); } 28% { -webkit-filter: hue-rotate(111.6deg); filter: hue-rotate(111.6deg); background-color: #ff6966; -webkit-transform: translate(-13px, -12px) scale(1.13); transform: translate(-13px, -12px) scale(1.13); } 29% { -webkit-filter: saturate(2.98) hue-rotate(122.4deg); filter: saturate(2.98) hue-rotate(122.4deg); background-color: #ff66e0; -webkit-transform: translate(-11px, -1px) scale(1.1); transform: translate(-11px, -1px) scale(1.1); } 30% { -webkit-filter: hue-rotate(57.6deg); filter: hue-rotate(57.6deg); background-color: #8066ff; -webkit-transform: translate(5px, -8px) scale(1.2); transform: translate(5px, -8px) scale(1.2); } 32% { -webkit-filter: hue-rotate(219.6deg); filter: hue-rotate(219.6deg); background-color: #85ff66; -webkit-transform: translate(3px, 2px) scale(1.23); transform: translate(3px, 2px) scale(1.23); } 33% { -webkit-filter: hue-rotate(338.4deg); filter: hue-rotate(338.4deg); background-color: #6694ff; -webkit-transform: translate(4px, 4px) scale(1.23); transform: translate(4px, 4px) scale(1.23); } 34% { -webkit-filter: hue-rotate(270deg); filter: hue-rotate(270deg); background-color: #ff66a8; -webkit-transform: translate(-5px, 7px) scale(1.08); transform: translate(-5px, 7px) scale(1.08); } 35% { -webkit-filter: hue-rotate(208.8deg); filter: hue-rotate(208.8deg); background-color: #78ff66; -webkit-transform: translate(14px, -9px) scale(1.15); transform: translate(14px, -9px) scale(1.15); } 36% { -webkit-filter: saturate(1.72) hue-rotate(241.2deg) invert(1); filter: saturate(1.72) hue-rotate(241.2deg) invert(1); background-color: #ff9966; -webkit-transform: translate(15px, 8px) scale(1.06); transform: translate(15px, 8px) scale(1.06); } 37% { -webkit-filter: hue-rotate(248.4deg); filter: hue-rotate(248.4deg); background-color: #ba66ff; -webkit-transform: translate(14px, 7px) scale(1.22); transform: translate(14px, 7px) scale(1.22); } 38% { -webkit-filter: hue-rotate(21.6deg); filter: hue-rotate(21.6deg); background-color: #6696ff; -webkit-transform: translate(12px, -9px) scale(1.17); transform: translate(12px, -9px) scale(1.17); } 39% { -webkit-filter: hue-rotate(126deg); filter: hue-rotate(126deg); background-color: #bd66ff; -webkit-transform: translate(11px, 13px) scale(1.22); transform: translate(11px, 13px) scale(1.22); } 40% { -webkit-filter: hue-rotate(349.2deg); filter: hue-rotate(349.2deg); background-color: #ff8f66; -webkit-transform: translate(-13px, -3px) scale(1.23); transform: translate(-13px, -3px) scale(1.23); } 41% { -webkit-filter: hue-rotate(226.8deg); filter: hue-rotate(226.8deg); background-color: #ff66a8; -webkit-transform: translate(-13px, 7px) scale(1.21); transform: translate(-13px, 7px) scale(1.21); } 44% { -webkit-filter: hue-rotate(284.4deg); filter: hue-rotate(284.4deg); background-color: #85ff66; -webkit-transform: translate(-1px, -3px) scale(1.17); transform: translate(-1px, -3px) scale(1.17); } 45% { -webkit-filter: hue-rotate(356.4deg) contrast(5.95); filter: hue-rotate(356.4deg) contrast(5.95); background-color: #c266ff; -webkit-transform: translate(15px, -1px) scale(1.17); transform: translate(15px, -1px) scale(1.17); } 46% { -webkit-filter: hue-rotate(14.4deg); filter: hue-rotate(14.4deg); background-color: #7866ff; -webkit-transform: translate(-6px, 11px) scale(1.18); transform: translate(-6px, 11px) scale(1.18); } 48% { -webkit-filter: hue-rotate(288deg); filter: hue-rotate(288deg); background-color: #9966ff; -webkit-transform: translate(-14px, -4px) scale(1.24); transform: translate(-14px, -4px) scale(1.24); } 49% { -webkit-filter: hue-rotate(291.6deg); filter: hue-rotate(291.6deg); background-color: #66fffc; -webkit-transform: translate(-7px, -3px) scale(1.15); transform: translate(-7px, -3px) scale(1.15); } 50% { -webkit-filter: hue-rotate(144deg); filter: hue-rotate(144deg); background-color: #e6ff66; -webkit-transform: translate(0px, 4px) scale(1.08); transform: translate(0px, 4px) scale(1.08); } 51% { -webkit-filter: hue-rotate(313.2deg); filter: hue-rotate(313.2deg); background-color: #66ffad; -webkit-transform: translate(-3px, 11px) scale(1.23); transform: translate(-3px, 11px) scale(1.23); } 54% { -webkit-filter: hue-rotate(302.4deg) contrast(8.65); filter: hue-rotate(302.4deg) contrast(8.65); background-color: #66ffc2; -webkit-transform: translate(-14px, 0px) scale(1.06); transform: translate(-14px, 0px) scale(1.06); } 55% { -webkit-filter: hue-rotate(100.8deg); filter: hue-rotate(100.8deg); background-color: #66c2ff; -webkit-transform: translate(-2px, -8px) scale(1.18); transform: translate(-2px, -8px) scale(1.18); } 56% { -webkit-filter: hue-rotate(255.6deg); filter: hue-rotate(255.6deg); background-color: #66bdff; -webkit-transform: translate(14px, -11px) scale(1.25); transform: translate(14px, -11px) scale(1.25); } 57% { -webkit-filter: hue-rotate(194.4deg); filter: hue-rotate(194.4deg); background-color: #cf66ff; -webkit-transform: translate(12px, 9px) scale(1.15); transform: translate(12px, 9px) scale(1.15); } 62% { -webkit-filter: hue-rotate(316.8deg) contrast(8.92); filter: hue-rotate(316.8deg) contrast(8.92); background-color: #82ff66; -webkit-transform: translate(0px, -6px) scale(1.2); transform: translate(0px, -6px) scale(1.2); } 63% { -webkit-filter: hue-rotate(183.6deg); filter: hue-rotate(183.6deg); background-color: #66ffd6; -webkit-transform: translate(-4px, 8px) scale(1.25); transform: translate(-4px, 8px) scale(1.25); } 64% { -webkit-filter: hue-rotate(216deg); filter: hue-rotate(216deg); background-color: #8cff66; -webkit-transform: translate(6px, -1px) scale(1.25); transform: translate(6px, -1px) scale(1.25); } 65% { -webkit-filter: hue-rotate(280.8deg); filter: hue-rotate(280.8deg); background-color: #fffa66; -webkit-transform: translate(11px, -5px) scale(1.2); transform: translate(11px, -5px) scale(1.2); } 66% { -webkit-filter: hue-rotate(266.4deg) brightness(66%); filter: hue-rotate(266.4deg) brightness(66%); background-color: #66ffa1; -webkit-transform: translate(-9px, 3px) scale(1.17); transform: translate(-9px, 3px) scale(1.17); } 68% { -webkit-filter: hue-rotate(46.8deg); filter: hue-rotate(46.8deg); background-color: #ccff66; -webkit-transform: translate(7px, -9px) scale(1.08); transform: translate(7px, -9px) scale(1.08); } 69% { -webkit-filter: hue-rotate(111.6deg); filter: hue-rotate(111.6deg); background-color: #ffdb66; -webkit-transform: translate(-11px, 10px) scale(1.16); transform: translate(-11px, 10px) scale(1.16); } 70% { -webkit-filter: hue-rotate(313.2deg); filter: hue-rotate(313.2deg); background-color: #ff66f5; -webkit-transform: translate(-2px, 5px) scale(1.19); transform: translate(-2px, 5px) scale(1.19); } 71% { -webkit-filter: hue-rotate(32.4deg); filter: hue-rotate(32.4deg); background-color: #ff66a1; -webkit-transform: translate(3px, 0px) scale(1.16); transform: translate(3px, 0px) scale(1.16); } 74% { -webkit-filter: saturate(2.35) hue-rotate(291.6deg); filter: saturate(2.35) hue-rotate(291.6deg); background-color: #edff66; -webkit-transform: translate(15px, 0px) scale(1.23); transform: translate(15px, 0px) scale(1.23); } 75% { -webkit-filter: saturate(4.6) hue-rotate(259.2deg); filter: saturate(4.6) hue-rotate(259.2deg); background-color: #66ff82; -webkit-transform: translate(15px, 7px) scale(1.22); transform: translate(15px, 7px) scale(1.22); } 76% { -webkit-filter: saturate(5.5) hue-rotate(18deg) contrast(4.15); filter: saturate(5.5) hue-rotate(18deg) contrast(4.15); background-color: #69ff66; -webkit-transform: translate(-10px, -4px) scale(1.13); transform: translate(-10px, -4px) scale(1.13); } 77% { -webkit-filter: hue-rotate(230.4deg); filter: hue-rotate(230.4deg); background-color: #ff8a66; -webkit-transform: translate(-9px, 12px) scale(1.13); transform: translate(-9px, 12px) scale(1.13); } 78% { -webkit-filter: saturate(8.65) hue-rotate(86.4deg); filter: saturate(8.65) hue-rotate(86.4deg); background-color: #f5ff66; -webkit-transform: translate(-5px, -9px) scale(1.07); transform: translate(-5px, -9px) scale(1.07); } 79% { -webkit-filter: hue-rotate(223.2deg); filter: hue-rotate(223.2deg); background-color: #73ff66; -webkit-transform: translate(12px, 2px) scale(1.25); transform: translate(12px, 2px) scale(1.25); } 83% { -webkit-filter: saturate(3.97) hue-rotate(201.6deg); filter: saturate(3.97) hue-rotate(201.6deg); background-color: #66ccff; -webkit-transform: translate(12px, -4px) scale(1.15); transform: translate(12px, -4px) scale(1.15); } 84% { -webkit-filter: hue-rotate(93.6deg); filter: hue-rotate(93.6deg); background-color: #66ff70; -webkit-transform: translate(9px, -1px) scale(1.09); transform: translate(9px, -1px) scale(1.09); } 85% { -webkit-filter: saturate(1.72) hue-rotate(18deg); filter: saturate(1.72) hue-rotate(18deg); background-color: #ff9466; -webkit-transform: translate(13px, 3px) scale(1.1); transform: translate(13px, 3px) scale(1.1); } 86% { -webkit-filter: saturate(8.02) hue-rotate(176.4deg); filter: saturate(8.02) hue-rotate(176.4deg); background-color: #ffd466; -webkit-transform: translate(-14px, 4px) scale(1.13); transform: translate(-14px, 4px) scale(1.13); } 87% { -webkit-filter: hue-rotate(54deg); filter: hue-rotate(54deg); background-color: #d966ff; -webkit-transform: translate(11px, 13px) scale(1.14); transform: translate(11px, 13px) scale(1.14); } 88% { -webkit-filter: hue-rotate(201.6deg); filter: hue-rotate(201.6deg); background-color: #668fff; -webkit-transform: translate(-11px, 5px) scale(1.17); transform: translate(-11px, 5px) scale(1.17); } 89% { -webkit-filter: saturate(8.65) hue-rotate(338.4deg) brightness(58%); filter: saturate(8.65) hue-rotate(338.4deg) brightness(58%); background-color: #c7ff66; -webkit-transform: translate(5px, -10px) scale(1.07); transform: translate(5px, -10px) scale(1.07); } 90% { -webkit-filter: invert(1); filter: invert(1); background-color: #66fffa; -webkit-transform: translate(8px, -11px) scale(1.13); transform: translate(8px, -11px) scale(1.13); } 91% { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); background-color: #7066ff; -webkit-transform: translate(-13px, 6px) scale(1.19); transform: translate(-13px, 6px) scale(1.19); } 92% { -webkit-filter: hue-rotate(288deg); filter: hue-rotate(288deg); background-color: #ffe366; -webkit-transform: translate(-9px, -9px) scale(1.09); transform: translate(-9px, -9px) scale(1.09); } 93% { -webkit-filter: hue-rotate(129.6deg); filter: hue-rotate(129.6deg); background-color: #66fcff; -webkit-transform: translate(-14px, 0px) scale(1.08); transform: translate(-14px, 0px) scale(1.08); } 94% { -webkit-filter: hue-rotate(244.8deg); filter: hue-rotate(244.8deg); background-color: #6669ff; -webkit-transform: translate(-5px, 7px) scale(1.08); transform: translate(-5px, 7px) scale(1.08); } 95% { -webkit-filter: hue-rotate(36deg); filter: hue-rotate(36deg); background-color: #d666ff; -webkit-transform: translate(-5px, 10px) scale(1.16); transform: translate(-5px, 10px) scale(1.16); } 96% { -webkit-filter: hue-rotate(118.8deg); filter: hue-rotate(118.8deg); background-color: #66ff85; -webkit-transform: translate(0px, 1px) scale(1.24); transform: translate(0px, 1px) scale(1.24); } 97% { -webkit-filter: hue-rotate(64.8deg); filter: hue-rotate(64.8deg); background-color: #f266ff; -webkit-transform: translate(2px, 8px) scale(1.18); transform: translate(2px, 8px) scale(1.18); } 98% { -webkit-filter: hue-rotate(237.6deg); filter: hue-rotate(237.6deg); background-color: #66c2ff; -webkit-transform: translate(12px, -7px) scale(1.13); transform: translate(12px, -7px) scale(1.13); } 100% { background-color: #e6ff66; -webkit-transform: translate(-1px, -3px) scale(1.17); transform: translate(-1px, -3px) scale(1.17); }
}
@keyframes spazz { 0% { -webkit-filter: hue-rotate(298.8deg) brightness(50.5%); filter: hue-rotate(298.8deg) brightness(50.5%); background-color: #ff6687; -webkit-transform: translate(-12px, 9px) scale(1.2); transform: translate(-12px, 9px) scale(1.2); } 2% { -webkit-filter: saturate(2.62) hue-rotate(165.6deg); filter: saturate(2.62) hue-rotate(165.6deg); background-color: #c966ff; -webkit-transform: translate(-9px, 0px) scale(1.09); transform: translate(-9px, 0px) scale(1.09); } 5% { -webkit-filter: hue-rotate(54deg) contrast(2.89); filter: hue-rotate(54deg) contrast(2.89); background-color: #66ffd9; -webkit-transform: translate(-4px, 12px) scale(1.17); transform: translate(-4px, 12px) scale(1.17); } 8% { -webkit-filter: hue-rotate(324deg); filter: hue-rotate(324deg); background-color: #66ffad; -webkit-transform: translate(13px, 1px) scale(1.2); transform: translate(13px, 1px) scale(1.2); } 12% { -webkit-filter: hue-rotate(176.4deg) contrast(2.17); filter: hue-rotate(176.4deg) contrast(2.17); background-color: #ffed66; -webkit-transform: translate(-13px, 1px) scale(1.24); transform: translate(-13px, 1px) scale(1.24); } 13% { -webkit-filter: hue-rotate(327.6deg); filter: hue-rotate(327.6deg); background-color: #66ffb5; -webkit-transform: translate(9px, 9px) scale(1.21); transform: translate(9px, 9px) scale(1.21); } 14% { -webkit-filter: hue-rotate(219.6deg); filter: hue-rotate(219.6deg); background-color: #f2ff66; -webkit-transform: translate(-3px, -6px) scale(1.08); transform: translate(-3px, -6px) scale(1.08); } 15% { -webkit-filter: hue-rotate(129.6deg); filter: hue-rotate(129.6deg); background-color: #8566ff; -webkit-transform: translate(9px, 14px) scale(1.2); transform: translate(9px, 14px) scale(1.2); } 17% { -webkit-filter: hue-rotate(10.8deg) contrast(7.48); filter: hue-rotate(10.8deg) contrast(7.48); background-color: #66a6ff; -webkit-transform: translate(-7px, 7px) scale(1.24); transform: translate(-7px, 7px) scale(1.24); } 19% { -webkit-filter: hue-rotate(111.6deg) contrast(5.77); filter: hue-rotate(111.6deg) contrast(5.77); background-color: #66e3ff; -webkit-transform: translate(-6px, 9px) scale(1.07); transform: translate(-6px, 9px) scale(1.07); } 20% { -webkit-filter: saturate(7.57) hue-rotate(61.2deg); filter: saturate(7.57) hue-rotate(61.2deg); background-color: #66ffb3; -webkit-transform: translate(2px, 12px) scale(1.17); transform: translate(2px, 12px) scale(1.17); } 21% { -webkit-filter: hue-rotate(82.8deg); filter: hue-rotate(82.8deg); background-color: #ff66a1; -webkit-transform: translate(12px, -6px) scale(1.25); transform: translate(12px, -6px) scale(1.25); } 22% { -webkit-filter: hue-rotate(234deg) contrast(9.55); filter: hue-rotate(234deg) contrast(9.55); background-color: #ff6673; -webkit-transform: translate(-12px, 12px) scale(1.23); transform: translate(-12px, 12px) scale(1.23); } 23% { -webkit-filter: hue-rotate(39.6deg); filter: hue-rotate(39.6deg); background-color: #66c4ff; -webkit-transform: translate(9px, -12px) scale(1.24); transform: translate(9px, -12px) scale(1.24); } 24% { -webkit-filter: hue-rotate(36deg); filter: hue-rotate(36deg); background-color: #ff6669; -webkit-transform: translate(-7px, 15px) scale(1.07); transform: translate(-7px, 15px) scale(1.07); } 25% { -webkit-filter: hue-rotate(237.6deg); filter: hue-rotate(237.6deg); background-color: #d466ff; -webkit-transform: translate(-11px, -11px) scale(1.16); transform: translate(-11px, -11px) scale(1.16); } 26% { -webkit-filter: hue-rotate(79.2deg); filter: hue-rotate(79.2deg); background-color: #ba66ff; -webkit-transform: translate(7px, -4px) scale(1.25); transform: translate(7px, -4px) scale(1.25); } 27% { -webkit-filter: hue-rotate(136.8deg); filter: hue-rotate(136.8deg); background-color: #ff666e; -webkit-transform: translate(-12px, 10px) scale(1.12); transform: translate(-12px, 10px) scale(1.12); } 28% { -webkit-filter: hue-rotate(111.6deg); filter: hue-rotate(111.6deg); background-color: #ff6966; -webkit-transform: translate(-13px, -12px) scale(1.13); transform: translate(-13px, -12px) scale(1.13); } 29% { -webkit-filter: saturate(2.98) hue-rotate(122.4deg); filter: saturate(2.98) hue-rotate(122.4deg); background-color: #ff66e0; -webkit-transform: translate(-11px, -1px) scale(1.1); transform: translate(-11px, -1px) scale(1.1); } 30% { -webkit-filter: hue-rotate(57.6deg); filter: hue-rotate(57.6deg); background-color: #8066ff; -webkit-transform: translate(5px, -8px) scale(1.2); transform: translate(5px, -8px) scale(1.2); } 32% { -webkit-filter: hue-rotate(219.6deg); filter: hue-rotate(219.6deg); background-color: #85ff66; -webkit-transform: translate(3px, 2px) scale(1.23); transform: translate(3px, 2px) scale(1.23); } 33% { -webkit-filter: hue-rotate(338.4deg); filter: hue-rotate(338.4deg); background-color: #6694ff; -webkit-transform: translate(4px, 4px) scale(1.23); transform: translate(4px, 4px) scale(1.23); } 34% { -webkit-filter: hue-rotate(270deg); filter: hue-rotate(270deg); background-color: #ff66a8; -webkit-transform: translate(-5px, 7px) scale(1.08); transform: translate(-5px, 7px) scale(1.08); } 35% { -webkit-filter: hue-rotate(208.8deg); filter: hue-rotate(208.8deg); background-color: #78ff66; -webkit-transform: translate(14px, -9px) scale(1.15); transform: translate(14px, -9px) scale(1.15); } 36% { -webkit-filter: saturate(1.72) hue-rotate(241.2deg) invert(1); filter: saturate(1.72) hue-rotate(241.2deg) invert(1); background-color: #ff9966; -webkit-transform: translate(15px, 8px) scale(1.06); transform: translate(15px, 8px) scale(1.06); } 37% { -webkit-filter: hue-rotate(248.4deg); filter: hue-rotate(248.4deg); background-color: #ba66ff; -webkit-transform: translate(14px, 7px) scale(1.22); transform: translate(14px, 7px) scale(1.22); } 38% { -webkit-filter: hue-rotate(21.6deg); filter: hue-rotate(21.6deg); background-color: #6696ff; -webkit-transform: translate(12px, -9px) scale(1.17); transform: translate(12px, -9px) scale(1.17); } 39% { -webkit-filter: hue-rotate(126deg); filter: hue-rotate(126deg); background-color: #bd66ff; -webkit-transform: translate(11px, 13px) scale(1.22); transform: translate(11px, 13px) scale(1.22); } 40% { -webkit-filter: hue-rotate(349.2deg); filter: hue-rotate(349.2deg); background-color: #ff8f66; -webkit-transform: translate(-13px, -3px) scale(1.23); transform: translate(-13px, -3px) scale(1.23); } 41% { -webkit-filter: hue-rotate(226.8deg); filter: hue-rotate(226.8deg); background-color: #ff66a8; -webkit-transform: translate(-13px, 7px) scale(1.21); transform: translate(-13px, 7px) scale(1.21); } 44% { -webkit-filter: hue-rotate(284.4deg); filter: hue-rotate(284.4deg); background-color: #85ff66; -webkit-transform: translate(-1px, -3px) scale(1.17); transform: translate(-1px, -3px) scale(1.17); } 45% { -webkit-filter: hue-rotate(356.4deg) contrast(5.95); filter: hue-rotate(356.4deg) contrast(5.95); background-color: #c266ff; -webkit-transform: translate(15px, -1px) scale(1.17); transform: translate(15px, -1px) scale(1.17); } 46% { -webkit-filter: hue-rotate(14.4deg); filter: hue-rotate(14.4deg); background-color: #7866ff; -webkit-transform: translate(-6px, 11px) scale(1.18); transform: translate(-6px, 11px) scale(1.18); } 48% { -webkit-filter: hue-rotate(288deg); filter: hue-rotate(288deg); background-color: #9966ff; -webkit-transform: translate(-14px, -4px) scale(1.24); transform: translate(-14px, -4px) scale(1.24); } 49% { -webkit-filter: hue-rotate(291.6deg); filter: hue-rotate(291.6deg); background-color: #66fffc; -webkit-transform: translate(-7px, -3px) scale(1.15); transform: translate(-7px, -3px) scale(1.15); } 50% { -webkit-filter: hue-rotate(144deg); filter: hue-rotate(144deg); background-color: #e6ff66; -webkit-transform: translate(0px, 4px) scale(1.08); transform: translate(0px, 4px) scale(1.08); } 51% { -webkit-filter: hue-rotate(313.2deg); filter: hue-rotate(313.2deg); background-color: #66ffad; -webkit-transform: translate(-3px, 11px) scale(1.23); transform: translate(-3px, 11px) scale(1.23); } 54% { -webkit-filter: hue-rotate(302.4deg) contrast(8.65); filter: hue-rotate(302.4deg) contrast(8.65); background-color: #66ffc2; -webkit-transform: translate(-14px, 0px) scale(1.06); transform: translate(-14px, 0px) scale(1.06); } 55% { -webkit-filter: hue-rotate(100.8deg); filter: hue-rotate(100.8deg); background-color: #66c2ff; -webkit-transform: translate(-2px, -8px) scale(1.18); transform: translate(-2px, -8px) scale(1.18); } 56% { -webkit-filter: hue-rotate(255.6deg); filter: hue-rotate(255.6deg); background-color: #66bdff; -webkit-transform: translate(14px, -11px) scale(1.25); transform: translate(14px, -11px) scale(1.25); } 57% { -webkit-filter: hue-rotate(194.4deg); filter: hue-rotate(194.4deg); background-color: #cf66ff; -webkit-transform: translate(12px, 9px) scale(1.15); transform: translate(12px, 9px) scale(1.15); } 62% { -webkit-filter: hue-rotate(316.8deg) contrast(8.92); filter: hue-rotate(316.8deg) contrast(8.92); background-color: #82ff66; -webkit-transform: translate(0px, -6px) scale(1.2); transform: translate(0px, -6px) scale(1.2); } 63% { -webkit-filter: hue-rotate(183.6deg); filter: hue-rotate(183.6deg); background-color: #66ffd6; -webkit-transform: translate(-4px, 8px) scale(1.25); transform: translate(-4px, 8px) scale(1.25); } 64% { -webkit-filter: hue-rotate(216deg); filter: hue-rotate(216deg); background-color: #8cff66; -webkit-transform: translate(6px, -1px) scale(1.25); transform: translate(6px, -1px) scale(1.25); } 65% { -webkit-filter: hue-rotate(280.8deg); filter: hue-rotate(280.8deg); background-color: #fffa66; -webkit-transform: translate(11px, -5px) scale(1.2); transform: translate(11px, -5px) scale(1.2); } 66% { -webkit-filter: hue-rotate(266.4deg) brightness(66%); filter: hue-rotate(266.4deg) brightness(66%); background-color: #66ffa1; -webkit-transform: translate(-9px, 3px) scale(1.17); transform: translate(-9px, 3px) scale(1.17); } 68% { -webkit-filter: hue-rotate(46.8deg); filter: hue-rotate(46.8deg); background-color: #ccff66; -webkit-transform: translate(7px, -9px) scale(1.08); transform: translate(7px, -9px) scale(1.08); } 69% { -webkit-filter: hue-rotate(111.6deg); filter: hue-rotate(111.6deg); background-color: #ffdb66; -webkit-transform: translate(-11px, 10px) scale(1.16); transform: translate(-11px, 10px) scale(1.16); } 70% { -webkit-filter: hue-rotate(313.2deg); filter: hue-rotate(313.2deg); background-color: #ff66f5; -webkit-transform: translate(-2px, 5px) scale(1.19); transform: translate(-2px, 5px) scale(1.19); } 71% { -webkit-filter: hue-rotate(32.4deg); filter: hue-rotate(32.4deg); background-color: #ff66a1; -webkit-transform: translate(3px, 0px) scale(1.16); transform: translate(3px, 0px) scale(1.16); } 74% { -webkit-filter: saturate(2.35) hue-rotate(291.6deg); filter: saturate(2.35) hue-rotate(291.6deg); background-color: #edff66; -webkit-transform: translate(15px, 0px) scale(1.23); transform: translate(15px, 0px) scale(1.23); } 75% { -webkit-filter: saturate(4.6) hue-rotate(259.2deg); filter: saturate(4.6) hue-rotate(259.2deg); background-color: #66ff82; -webkit-transform: translate(15px, 7px) scale(1.22); transform: translate(15px, 7px) scale(1.22); } 76% { -webkit-filter: saturate(5.5) hue-rotate(18deg) contrast(4.15); filter: saturate(5.5) hue-rotate(18deg) contrast(4.15); background-color: #69ff66; -webkit-transform: translate(-10px, -4px) scale(1.13); transform: translate(-10px, -4px) scale(1.13); } 77% { -webkit-filter: hue-rotate(230.4deg); filter: hue-rotate(230.4deg); background-color: #ff8a66; -webkit-transform: translate(-9px, 12px) scale(1.13); transform: translate(-9px, 12px) scale(1.13); } 78% { -webkit-filter: saturate(8.65) hue-rotate(86.4deg); filter: saturate(8.65) hue-rotate(86.4deg); background-color: #f5ff66; -webkit-transform: translate(-5px, -9px) scale(1.07); transform: translate(-5px, -9px) scale(1.07); } 79% { -webkit-filter: hue-rotate(223.2deg); filter: hue-rotate(223.2deg); background-color: #73ff66; -webkit-transform: translate(12px, 2px) scale(1.25); transform: translate(12px, 2px) scale(1.25); } 83% { -webkit-filter: saturate(3.97) hue-rotate(201.6deg); filter: saturate(3.97) hue-rotate(201.6deg); background-color: #66ccff; -webkit-transform: translate(12px, -4px) scale(1.15); transform: translate(12px, -4px) scale(1.15); } 84% { -webkit-filter: hue-rotate(93.6deg); filter: hue-rotate(93.6deg); background-color: #66ff70; -webkit-transform: translate(9px, -1px) scale(1.09); transform: translate(9px, -1px) scale(1.09); } 85% { -webkit-filter: saturate(1.72) hue-rotate(18deg); filter: saturate(1.72) hue-rotate(18deg); background-color: #ff9466; -webkit-transform: translate(13px, 3px) scale(1.1); transform: translate(13px, 3px) scale(1.1); } 86% { -webkit-filter: saturate(8.02) hue-rotate(176.4deg); filter: saturate(8.02) hue-rotate(176.4deg); background-color: #ffd466; -webkit-transform: translate(-14px, 4px) scale(1.13); transform: translate(-14px, 4px) scale(1.13); } 87% { -webkit-filter: hue-rotate(54deg); filter: hue-rotate(54deg); background-color: #d966ff; -webkit-transform: translate(11px, 13px) scale(1.14); transform: translate(11px, 13px) scale(1.14); } 88% { -webkit-filter: hue-rotate(201.6deg); filter: hue-rotate(201.6deg); background-color: #668fff; -webkit-transform: translate(-11px, 5px) scale(1.17); transform: translate(-11px, 5px) scale(1.17); } 89% { -webkit-filter: saturate(8.65) hue-rotate(338.4deg) brightness(58%); filter: saturate(8.65) hue-rotate(338.4deg) brightness(58%); background-color: #c7ff66; -webkit-transform: translate(5px, -10px) scale(1.07); transform: translate(5px, -10px) scale(1.07); } 90% { -webkit-filter: invert(1); filter: invert(1); background-color: #66fffa; -webkit-transform: translate(8px, -11px) scale(1.13); transform: translate(8px, -11px) scale(1.13); } 91% { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); background-color: #7066ff; -webkit-transform: translate(-13px, 6px) scale(1.19); transform: translate(-13px, 6px) scale(1.19); } 92% { -webkit-filter: hue-rotate(288deg); filter: hue-rotate(288deg); background-color: #ffe366; -webkit-transform: translate(-9px, -9px) scale(1.09); transform: translate(-9px, -9px) scale(1.09); } 93% { -webkit-filter: hue-rotate(129.6deg); filter: hue-rotate(129.6deg); background-color: #66fcff; -webkit-transform: translate(-14px, 0px) scale(1.08); transform: translate(-14px, 0px) scale(1.08); } 94% { -webkit-filter: hue-rotate(244.8deg); filter: hue-rotate(244.8deg); background-color: #6669ff; -webkit-transform: translate(-5px, 7px) scale(1.08); transform: translate(-5px, 7px) scale(1.08); } 95% { -webkit-filter: hue-rotate(36deg); filter: hue-rotate(36deg); background-color: #d666ff; -webkit-transform: translate(-5px, 10px) scale(1.16); transform: translate(-5px, 10px) scale(1.16); } 96% { -webkit-filter: hue-rotate(118.8deg); filter: hue-rotate(118.8deg); background-color: #66ff85; -webkit-transform: translate(0px, 1px) scale(1.24); transform: translate(0px, 1px) scale(1.24); } 97% { -webkit-filter: hue-rotate(64.8deg); filter: hue-rotate(64.8deg); background-color: #f266ff; -webkit-transform: translate(2px, 8px) scale(1.18); transform: translate(2px, 8px) scale(1.18); } 98% { -webkit-filter: hue-rotate(237.6deg); filter: hue-rotate(237.6deg); background-color: #66c2ff; -webkit-transform: translate(12px, -7px) scale(1.13); transform: translate(12px, -7px) scale(1.13); } 100% { background-color: #e6ff66; -webkit-transform: translate(-1px, -3px) scale(1.17); transform: translate(-1px, -3px) scale(1.17); }
}
Glitch Pop - Script Codes
Glitch Pop - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded June 24, 2022
Rating 4.5
Size 4,644 Kb
Views 36,432
Do you need developer help for Glitch Pop?

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!

Noah Blon (noahblon) Script Codes
Name
Colored SVG background-image - Filter Method
Colored SVG background-image - Mask Method
Juggle
An Intro to SVG Animation with SMIL - Example 1
Burton Ball
Planet
9 Pens
Free Radicals
Responsive Image Grid using SVG wrappers
CSS Jellyfish
Create amazing captions with AI!

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!