• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
246
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • [cXF] Cookie Notice
    [cXF] Cookie Notice
    Настраивает уведомление cookie или делает его плавающим.
  • [AP] Activity/Longevity Meters
    [AP] Activity/Longevity Meters
    Дополнение добавляет "активность" и "долголетие" для пользователей в postbits и профиль.
  • dizzy - Support Creators Content Script
    dizzy - Support Creators Content Script
    Платформа, на которой создатели контента монетизируют свой контент.
  • My Social Network (App and Website)
    My Social Network (App and Website)
    Вы можете легко и просто создать свою собственную социальную сеть для Android.
  • Remove admin blocks
    Remove admin blocks
    Удаляет выбранные блоки панели управления администратора.
Верх Низ