JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<i></i>

CSS

i {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform-origin: center center;
  animation: anim-bg 10s infinite;
  animation-timing-function: linear;
  font-style: normal;
}

i:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  mix-blend-mode: difference;
  opacity: 0;
  background-image: url("http://i.imgur.com/iW7zAOt.jpg");
  background-size: cover;
  background-position: center center;
  transform-origin: center center;
  animation: anim-before 10s infinite;
  animation-timing-function: linear;
}

i:after {
  content: 'YOU';
  font-family: 'Arial', sans-serif;
  font-size: 10vw;
  font-weight: 700;
  color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center center;
  animation: anim-after 10s infinite;
  animation-timing-function: linear;
}

@keyframes anim-bg {
  0% {
    background-color: #000;
  }
  29.9999% {
    background-color: #000;
  }
  30% {
    background-color: #fff;
  }
  30.5% {
    background-color: #fff;
  }
  31% {
    background-color: #000;
  }
  31.5% {
    background-color: #fff;
  }
  32% {
    background-color: #000;
  }
  32.5% {
    background-color: #fff;
  }
  33% {
    background-color: #000;
  }
  33.5% {
    background-color: #fff;
  }
  34% {
    background-color: #000;
  }
  34.5% {
    background-color: #fff;
  }
  35% {
    background-color: #000;
  }
  35.5% {
    background-color: #fff;
  }
  36% {
    background-color: #000;
  }
  36.5% {
    background-color: #fff;
  }
  37% {
    background-color: #000;
  }
  37.5% {
    background-color: #fff;
  }
  38% {
    background-color: #000;
  }
  38.5% {
    background-color: #fff;
  }
  39% {
    background-color: #000;
  }
  39.5% {
    background-color: #fff;
  }
  40% {
    background-color: #000;
  }
  40.5% {
    background-color: #fff;
  }
  41% {
    background-color: #000;
  }
  41.5% {
   ...