html, body {

  width: 100%;

  height: 100%;

  display: flex;

}

​

div {

  position: relative;

  width: 240px;

  height: 240px;

/*   border-radius: 50%; */

  border: 2px solid #666;

  box-shadow: 1px 1px 4px 2px #aaa;

  margin: auto;

  color: #333;

  text-align: center;

  font-size: 16px;

  line-height: 520px;

}

div::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

/*   transform: translate(110%, 0); */

  background:

    repeating-linear-gradient(

      50deg,

      #F7A37B,

      #F7A37B 1em,

      #FFDEA8 1em,

      #FFDEA8 2em,

      #D0E4B0 2em,

      #D0E4B0 3em,

      #7CC5D0 3em,

      #7CC5D0 4em,

      #00A2E1 4em,

      #00A2E1 5em,

      #0085C8 5em,

      #0085C8 6em

    );

  animation: move 5s infinite linear;

  mix-blend-mode: multiply;

}

​

div::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

/*   transform: translate(-110%, 0); */

  background:

    repeating-linear-gradient(

    -50deg,

    #F7A37B,

    #F7A37B 1em,

    #FFDEA8 1em,

    #FFDEA8 2em,

    #D0E4B0 2em,

    #D0E4B0 3em,

    #7CC5D0 3em,

    #7CC5D0 4em,

    #00A2E1 4em,

    #00A2E1 5em,

    #0085C8 5em,

    #0085C8 6em

  );

  animation: move 5s infinite linear;

}

​

@keyframes moves {

  60% {

    transform: translate(0, 0);

  }

  100% {

    transform: translate(0, 0);

  }

}

​

​

div:nth-child(2)::after {

  mix-blend-mode: color-burn;

}

​

div:nth-child(3)::after {

  mix-blend-mode: difference;

}

​

div:nth-child(4)::after {

  mix-blend-mode: luminosity;

}

​

div:nth-child(5)::after {

  mix-blend-mode: exclusion;

}

​

div:nth-child(6)::after {

  mix-blend-mode: lighten;

}