<h1>
  <span class="rainbow-font pink">E</span><span class="rainbow-font red">v</span><span class="rainbow-font orange">e</span><span class="rainbow-font yellow">r</span><span class="rainbow-font green">y</span>
  <span class="rainbow-font blue">B</span><span class="rainbow-font purple">e</span><span class="rainbow-font pink">a</span><span class="rainbow-font red">n</span>
  <span class="rainbow-font orange">i</span><span class="rainbow-font yellow">s</span>
  <span class="rainbow-font green">a</span><span class="rainbow-font blue">w</span><span class="rainbow-font purple">e</span><span class="rainbow-font pink">s</span><span class="rainbow-font red">o</span><span class="rainbow-font orange">m</span><span class="rainbow-font yellow">e</span><span class="rainbow-font green">!</span>
</h1>
<div class="container">
  <div class="animation-container">
    <div class="rainbow">
    </div>
    <div class="bean">
    </div>
  </div>
</div>

body
{
  background-color: #003366;
  padding: 0;
  margin: 30px 0 0 0;
}

h1
{
  font-family: Helvetica, sans-serif;
  padding-left: 30px;
  font-size: 45px;
}

.rainbow-font.pink
{
  color: #ff3aff;
}

.rainbow-font.red
{
  color: #ff000b;
}

.rainbow-font.orange
{
  color: #ffab0b;
}

.rainbow-font.yellow
{
  color: #ffff08;
}

.rainbow-font.green
{
  color: #4cff00;
}

.rainbow-font.blue
{
  color: #00b3ff;
}

.rainbow-font.purple
{
  color: #7a3aff;
}

.container
{
  display: block;
  width: 100%;
  height: 60px;
  overflow: hidden;
}

.animation-container
{
  display: block;
  position: relative;
  left: -185px;
  width: calc(100% + 400px);
  height: 60px;
  overflow: hidden;
  font-size: 0;
}

@keyframes fly-in {
  0% { width: 90px; }
  100% { width: 780px; }
}

.rainbow
{
  display: inline-block;
  margin-top: 1px;
  width: 90px;
  max-width: 100%;
  height: 59px;
  overflow: hidden;
  font-size: 0;
  animation-name: fly-in;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

.rainbow-segment
{
  display: inline-block;
  position: relative;
  height: 50px;
  width: 1px;
  margin-bottom: 10px;
  background-color: #ff000b;
  background-image: linear-gradient(to bottom, #ff000b, #ff000b 16.6%, #ffab0b 17%, #ffab0b 33.3%, #ffff08 34%, #ffff08 49.9%, #4cff00 50%, #4cff00 66.6%, #00b3ff 67%, #00b3ff 83.3%, #7a3aff 84%, #7a3aff 100%)
}

@keyframes rotate-position {
  0% { top: 0; }
  50% { top: 3px; }
  100% { top: 0; }
}

.down
{
  top: 3px;
  animation-name: rotate-position;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
}

.up
{
  top: 0;
  animation-name: rotate-position;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-delay: -350ms;
}

.bean
{
  display: inline-block;
  vertical-align: top;
  position: relative;
  height: 55px;
  width: 70px;
  left: -5px;
  background-color: red;
  border-radius: 4px 30px 30px 4px;
  box-shadow: 10px 0 0 0 #cccc08;
}

var rainbow_el = document.getElementsByClassName('rainbow')[0];
var i, j;
for (i = 0; i < 30; i++)
{
  for (j = 0; j < 30; j++)
  {
    var rainbow_segment_down = document.createElement('div');
    rainbow_segment_down.className = 'rainbow-segment down';
    rainbow_el.appendChild(rainbow_segment_down);
  }
  for (j = 0; j < 30; j++)
  {
    var rainbow_segment_up = document.createElement('div');
    rainbow_segment_up.className = 'rainbow-segment up';
    rainbow_el.appendChild(rainbow_segment_up);
  }
}