• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Визуализация на чистом 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
Просмотры
211
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Robot Styling on Current Visitors
    Robot Styling on Current Visitors
    Упрощает быстрое различие роботов в списке текущих посетителей.
  • [Liam W] (RIP) Member Self Delete
    [Liam W] (RIP) Member Self Delete
    Удаление пользователями своих учётных записей.
  • [AddonsLab] Post Limit Per Node
    [AddonsLab] Post Limit Per Node
    Ограничение на количество создаваемых тем и сообщений, в заданный промежуток времени.
  • What's New Digest
    What's New Digest
    Рассылка новостей и что нового произошло на форуме.
  • [EAE] BumperRM
    [EAE] BumperRM
    Позволяет поднимать ресурсы в списке ресурсов.
Верх Низ