JSFiddle - React, Tailwind, and code Playground

by jgrmstr

HTML

<body style="background-color:#000">
  
  <div id="crystals">
    <div class="texte">
      <p>Ô ma jolie Olympe !</p>
      <div class="petit">
      <p>Je me languis de ton étreinte</p>
        <p>Bref j'ai pas de rimes là,</p>
        <p>Mais mate ça c'est joli</p>
        <p>Tout comme toi tavu ha oué</p>
        <p><3</p>
      </div>
    </div>
    <div class="crystal_01"></div>
    <div class="crystal_02"></div>
    <div class="crystal_03"></div>    
  </div>

CSS

#crystals {
    position:absolute;
    top:0;
    left:0;
    width:480px;
    height:100%;
    background:transparent;
}
.crystal_01 {
    position:absolute;
    width:100%;
    height:100%;
    background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_01.png) repeat-y;
  
  -webkit-animation:background900 45s linear infinite;
  animation:background900 45s linear infinite;
}
.crystal_02 {
    position:absolute;
    width:100%;
    height:100%;
    background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_02.png) repeat-y;
  -webkit-animation:background900 22.5s linear infinite;
  animation:background900 22.5s linear infinite;
}
.crystal_03 {
    position:absolute;
    width:100%;
    height:100%;
    left:50%;
    margin-left:-140px;
        background:url(http://img.finalfantasyxiv.com/lds/promo/pc/global/images/world/what/crystal_03.png) repeat-y;
  -webkit-animation:background1200 20s linear infinite;
  animation:background1200 20s linear infinite;
}

@-webkit-keyframes background900
{
  0% { background-position:0 0; }
  100% { background-position:0 -900px; }
}

@keyframes background900
{
  0% { background-position:0 0; }
  100% { background-position:0 -900px; }
}

@-webkit-keyframes background1200
{
  0% { background-position:0 0; }
  100% { background-position:0 -1200px; }
}

@keyframes background1200
{
  0% { background-position:0 0; }
  100% { background-position:0 -1200px; }
}

.texte{
  color:white;
  position:absolute;
  text-align:center;
  width:480px;
  font-weight:bold;
  font-size:30px;
  top:30px;
  font-family:"Trebuchet MS"
}
.petit{
  font-size:20px
}