<div>
  <h1 class="absolute">DIK DIK DIK DIK</h1>
  <h1>DIK DIK DIK DIK</h1>
</div>
div {
  background: hotpink;
  &:before, &:after {
    content: '';
    position: absolute;
    top: -50px;
    background: rebeccapurple;
    width: 300px;
    height: 300px;
    transform: rotate(45deg);
    z-index: 1;
    animation: move 1s infinite alternate;
  }
  &:after {
    top: -30px;
    left: 500px;
    background: mediumvioletred;
    width: 100px;
    height: 300px;
    z-index: 1;
    animation: move 2s -0.4s ease-out infinite alternate;
  }
}
h1 {
  padding: 20px;
  font-family:sans-serif;  
  font-size:100px;
  position: relative;
  text-stroke: 2px white;
  -webkit-text-stroke: 2px white;
  color: white;
  &.absolute {
    position: absolute;
    top: 0;
    z-index: 2;
    color: transparent;
  }
}

@keyframes move {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(100%) rotate(360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.