<style>
body::after {
 content: "";
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 z-index: 9999;
 background:Â
  url('https://media3.giphy.com/media/v1.Y2lkPTZjMDliOTUyMG9leGllaHp1ZW5tZG96OGh1NzQ2MXdsdnh5YTl5djV0NDQzbzBybyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/PRnJd9y9M4tRZgA7cW/giphy.gif'),
  repeating-linear-gradient(
   90deg,
   red 0px, red 4px,
   orange 4px, orange 8px,
   yellow 8px, yellow 12px,
   green 12px, green 16px,
   blue 16px, blue 20px,
   indigo 20px, indigo 24px,
   violet 24px, violet 28px
  );
 background-size: cover, auto;
 background-repeat: no-repeat, repeat;
 background-position: center, top left;
 animation: moveLines 5s linear infinite, fadeOut 2.7s forwards;
 pointer-events: none;
}
@keyframes moveLines {
 from {
  background-position: center, 0 0;
 }
 to {
  background-position: center, 100px 0;
 }
}
@keyframes fadeOut {
 0% {
  opacity: 1;
  visibility: visible;
 }
 90% {
  opacity: 1;
 }
 100% {
  opacity: 0;
  visibility: hidden;
 }
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )