1 414 Codepen

Иллюминация на чистом CSS

Иллюминация реализованная только с помощью CSS

HTML

<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>
<div class='illuminati'>
  <div class='seeing'>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
    <div class='eye'>
      <i></i>
    </div>
  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #110c1d;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.illuminati {
  -webkit-animation: illuminati 2s ease-in-out alternate infinite;
          animation: illuminati 2s ease-in-out alternate infinite;
}
.illuminati:nth-child(0) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.illuminati:nth-child(0) .seeing {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.illuminati:nth-child(1) {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.illuminati:nth-child(1) .seeing {
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
}
.illuminati:nth-child(2) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.illuminati:nth-child(2) .seeing {
  -webkit-transform: scale(0.2);
          transform: scale(0.2);
}
.illuminati:nth-child(3) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.illuminati:nth-child(3) .seeing {
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}
.illuminati:nth-child(4) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.illuminati:nth-child(4) .seeing {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.illuminati:nth-child(5) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.illuminati:nth-child(5) .seeing {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.illuminati:nth-child(6) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.illuminati:nth-child(6) .seeing {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
.illuminati:nth-child(7) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.illuminati:nth-child(7) .seeing {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.illuminati:nth-child(8) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.illuminati:nth-child(8) .seeing {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.illuminati:nth-child(9) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.illuminati:nth-child(9) .seeing {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.illuminati:nth-child(10) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.illuminati:nth-child(10) .seeing {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.illuminati:nth-child(11) {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.illuminati:nth-child(11) .seeing {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.illuminati:nth-child(12) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.illuminati:nth-child(12) .seeing {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.illuminati:nth-child(13) {
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}
.illuminati:nth-child(13) .seeing {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.illuminati:nth-child(14) {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}
.illuminati:nth-child(14) .seeing {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}
.illuminati:nth-child(15) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.illuminati:nth-child(15) .seeing {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.illuminati:nth-child(16) {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}
.illuminati:nth-child(16) .seeing {
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
}
.illuminati:nth-child(17) {
  -webkit-animation-delay: -1.7s;
          animation-delay: -1.7s;
}
.illuminati:nth-child(17) .seeing {
  -webkit-transform: scale(1.7);
          transform: scale(1.7);
}
.illuminati:nth-child(18) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.illuminati:nth-child(18) .seeing {
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
}
.illuminati:nth-child(19) {
  -webkit-animation-delay: -1.9s;
          animation-delay: -1.9s;
}
.illuminati:nth-child(19) .seeing {
  -webkit-transform: scale(1.9);
          transform: scale(1.9);
}
.illuminati:nth-child(20) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.illuminati:nth-child(20) .seeing {
  -webkit-transform: scale(2);
          transform: scale(2);
}

.eye {
  width: 50px;
  height: 20px;
}
.eye i {
  border-top: 1px dashed transparent;
  border-left: 5px dotted transparent;
  border-radius: 50%;
  -webkit-animation: eye 1.5s linear infinite;
          animation: eye 1.5s linear infinite;
}
.eye:nth-child(0) {
  -webkit-transform: rotate(0deg) translate(100px);
          transform: rotate(0deg) translate(100px);
}
.eye:nth-child(0) i {
  border-color: red;
}
.eye:nth-child(1) {
  -webkit-transform: rotate(14.4deg) translate(100px);
          transform: rotate(14.4deg) translate(100px);
}
.eye:nth-child(1) i {
  border-color: #ff3d00;
}
.eye:nth-child(2) {
  -webkit-transform: rotate(28.8deg) translate(100px);
          transform: rotate(28.8deg) translate(100px);
}
.eye:nth-child(2) i {
  border-color: #ff7a00;
}
.eye:nth-child(3) {
  -webkit-transform: rotate(43.2deg) translate(100px);
          transform: rotate(43.2deg) translate(100px);
}
.eye:nth-child(3) i {
  border-color: #ffb800;
}
.eye:nth-child(4) {
  -webkit-transform: rotate(57.6deg) translate(100px);
          transform: rotate(57.6deg) translate(100px);
}
.eye:nth-child(4) i {
  border-color: #fff500;
}
.eye:nth-child(5) {
  -webkit-transform: rotate(72deg) translate(100px);
          transform: rotate(72deg) translate(100px);
}
.eye:nth-child(5) i {
  border-color: #ccff00;
}
.eye:nth-child(6) {
  -webkit-transform: rotate(86.4deg) translate(100px);
          transform: rotate(86.4deg) translate(100px);
}
.eye:nth-child(6) i {
  border-color: #8fff00;
}
.eye:nth-child(7) {
  -webkit-transform: rotate(100.8deg) translate(100px);
          transform: rotate(100.8deg) translate(100px);
}
.eye:nth-child(7) i {
  border-color: #52ff00;
}
.eye:nth-child(8) {
  -webkit-transform: rotate(115.2deg) translate(100px);
          transform: rotate(115.2deg) translate(100px);
}
.eye:nth-child(8) i {
  border-color: #14ff00;
}
.eye:nth-child(9) {
  -webkit-transform: rotate(129.6deg) translate(100px);
          transform: rotate(129.6deg) translate(100px);
}
.eye:nth-child(9) i {
  border-color: #00ff29;
}
.eye:nth-child(10) {
  -webkit-transform: rotate(144deg) translate(100px);
          transform: rotate(144deg) translate(100px);
}
.eye:nth-child(10) i {
  border-color: #00ff66;
}
.eye:nth-child(11) {
  -webkit-transform: rotate(158.4deg) translate(100px);
          transform: rotate(158.4deg) translate(100px);
}
.eye:nth-child(11) i {
  border-color: #00ffa3;
}
.eye:nth-child(12) {
  -webkit-transform: rotate(172.8deg) translate(100px);
          transform: rotate(172.8deg) translate(100px);
}
.eye:nth-child(12) i {
  border-color: #00ffe0;
}
.eye:nth-child(13) {
  -webkit-transform: rotate(187.2deg) translate(100px);
          transform: rotate(187.2deg) translate(100px);
}
.eye:nth-child(13) i {
  border-color: #00e0ff;
}
.eye:nth-child(14) {
  -webkit-transform: rotate(201.6deg) translate(100px);
          transform: rotate(201.6deg) translate(100px);
}
.eye:nth-child(14) i {
  border-color: #00a3ff;
}
.eye:nth-child(15) {
  -webkit-transform: rotate(216deg) translate(100px);
          transform: rotate(216deg) translate(100px);
}
.eye:nth-child(15) i {
  border-color: #0066ff;
}
.eye:nth-child(16) {
  -webkit-transform: rotate(230.4deg) translate(100px);
          transform: rotate(230.4deg) translate(100px);
}
.eye:nth-child(16) i {
  border-color: #0029ff;
}
.eye:nth-child(17) {
  -webkit-transform: rotate(244.8deg) translate(100px);
          transform: rotate(244.8deg) translate(100px);
}
.eye:nth-child(17) i {
  border-color: #1400ff;
}
.eye:nth-child(18) {
  -webkit-transform: rotate(259.2deg) translate(100px);
          transform: rotate(259.2deg) translate(100px);
}
.eye:nth-child(18) i {
  border-color: #5200ff;
}
.eye:nth-child(19) {
  -webkit-transform: rotate(273.6deg) translate(100px);
          transform: rotate(273.6deg) translate(100px);
}
.eye:nth-child(19) i {
  border-color: #8f00ff;
}
.eye:nth-child(20) {
  -webkit-transform: rotate(288deg) translate(100px);
          transform: rotate(288deg) translate(100px);
}
.eye:nth-child(20) i {
  border-color: #cc00ff;
}
.eye:nth-child(21) {
  -webkit-transform: rotate(302.4deg) translate(100px);
          transform: rotate(302.4deg) translate(100px);
}
.eye:nth-child(21) i {
  border-color: #ff00f5;
}
.eye:nth-child(22) {
  -webkit-transform: rotate(316.8deg) translate(100px);
          transform: rotate(316.8deg) translate(100px);
}
.eye:nth-child(22) i {
  border-color: #ff00b8;
}
.eye:nth-child(23) {
  -webkit-transform: rotate(331.2deg) translate(100px);
          transform: rotate(331.2deg) translate(100px);
}
.eye:nth-child(23) i {
  border-color: #ff007a;
}
.eye:nth-child(24) {
  -webkit-transform: rotate(345.6deg) translate(100px);
          transform: rotate(345.6deg) translate(100px);
}
.eye:nth-child(24) i {
  border-color: #ff003d;
}
.eye:nth-child(25) {
  -webkit-transform: rotate(360deg) translate(100px);
          transform: rotate(360deg) translate(100px);
}
.eye:nth-child(25) i {
  border-color: red;
}

@-webkit-keyframes eye {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes eye {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes illuminati {
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes illuminati {
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
Ссылки
https://codepen.io/Tsankashvili/pen/yjompv

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Бесконечная галактика
Codepen
Земля покрытая кристаллами
Codepen
Планета с астероидами
Codepen
3D сфера на чистом CSS
Codepen
Анимация с помощью d3.js
Codepen