DØPΞPØPΞ🇨🇦's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Frozen rainbow

<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>


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )