Визуализация на чистом CSS

Разработка Визуализация на чистом CSS

Нет прав для скачивания
Визуализация на чистом CSS
Обзор Обсуждение
Делаем разметку HTML:
Код: 
<div class='a3d'>
  <div class='dir'>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
  </div>
  <div class='dir'>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
  </div>
  <div class='dir'>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
  </div>
  <div class='dir'>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
  </div>
  <div class='dir'>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
    <div class='arm'>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
      <div class='ball'>
        <div class='puls'></div>
      </div>
    </div>
  </div>
</div>
Далее пишем стиль:
SCSS: 
@import 'compass/css3';

$n-dirs: 5;
$n-arms: 4;
$n-balls: 24;
$d: .75vmin;
$c: #F2CB7C,#E69775,#D16D6D,#9C5D6F;
$t: 13s;

$ba-dir: 360deg/$n-dirs;
$r-dir: .5*$d*(1 + 1/sin(.5*$ba-dir));
$ba-arm: 360deg/$n-arms;
$ba-ball: 360deg/$n-balls;
$ru-ball: .375*(1 + 1/tan(.5*$ba-ball));

body {
    overflow: hidden;
    height: 100vh;
    perspective: 27em;
    background: #423A49;
}

div, :after {
    position: absolute;
    transform-style: preserve-3d;
    animation: ani $t linear infinite;
}

.a3d {
    top: 50%; left: 50%;
    animation-name: ry
}

@keyframes ry { to { transform: rotatey(-1turn) } }

.dir {
    --az: calc(var(--i, 0)*#{$ba-dir});
    transform: rotate(var(--az));
    animation-name: rz;
    
    @for $i from 1 to $n-dirs { &:nth-child(#{$i + 1}) { --i: $i } }
}

@keyframes rz { to { transform: rotate(calc(var(--az) - 1turn)) } }

@for $i from 0 to $n-arms {
    .arm:nth-child(#{$i + 1}) {
        --j: $i;
        color: nth($c, $i%length($c) + 1)
    }
}

.ball {
    --k: 0;
    --d: calc((1 + .125*var(--k, 0))*#{$d});
    --ax: calc(var(--j)*#{$ba-arm} + var(--k)*#{$ba-ball});
    --x: calc(.375*var(--k)*var(--d) + #{$r-dir + 5*$d});
    --z: calc(#{$ru-ball}*var(--d));
    transform: rotatex(var(--ax))
        translate3d(var(--x), 0, var(--z));
    animation-name: rx;
    
    @for $i from 1 to $n-balls { &:nth-child(#{$i + 1}) { --k: $i } }
}

@keyframes rx {
    to {
        transform: rotatex(calc(var(--ax) - 4turn))
            translate3d(var(--x), 0, var(--z))
    }
}

.puls {
    transform: rotatex(calc(-1*var(--ax))) rotate(calc(-1*var(--az))) rotatey(0deg);
    animation-name: rrev;
    
    &:after {
        $t1: .05*$t;
        margin: calc(-.5*var(--d));
        width: var(--d); height: var(--d);
        border-radius: 50%;
        background: radial-gradient(circle at 25% 35%, #fff, currentColor 57%);
        animation: puls $t1 ease-in-out calc((var(--j)/#{$n-arms} + var(--k)/#{$n-balls})*#{-2*$t1}) infinite alternate;
        content: ''
    }
}

@keyframes rrev {
    to {
        transform: rotatex(calc(4turn - var(--ax))) rotate(calc(1turn - var(--az))) rotatey(1turn)
    }
}

@keyframes puls { to { transform: scale(.0625) } }
Смотрим наш результат:
03r41.gif
Автор
baltun
Скачиваний
0
Просмотры
613
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
Обсудить ресурс

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ