Font Awesome 5 - анимированные винтики, Как расположить разные иконки?

Я пытаюсь упорядочить удивительные анимированные винтики шрифта очень особым образом (как показано на изображении ниже).

Я создал скрипку из самых близких, которые, кажется, могу получить. Скрипка здесь https://jsfiddle.net/rke45798/13/

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.fa-small {
  font-size: 84px;
}

.fa-med {
  font-size: 70px;
}

.fa-lge {
  font-size: 48px;
}

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class = "cogs">
  <i class = "fas fa-cog fa-small slow-ani"></i>
  <br>
  <i class = "fas fa-cog fa-med slow-ani"></i>
  <i class = "fas fa-cog fa-lge slow-ani"></i>
</div>

Достижима ли схема, показанная на изображении выше? Если да, то есть ли какие-нибудь приемы CSS, которые можно применить?

да. Я использовал позицию: относительная; с различными интервалами, но не мог понять это правильно.

— 10.03.2019 20:44

html css font-awesome font-awesome-5

10.03.2019 19:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

3 131

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого вы можете использовать классы, предоставляемые Font Awesome. Лучше рассмотрите версию SVG, чтобы легко справиться с этим.

.slow-ani > * {
  animation-duration:5s;
}

<script defer src = "https://use.fontawesome.com/releases/v5.7.2/js/all.js" ></script>
<span class = "cogs slow-ani">
  <i class = "fas fa-cog fa-4x fa-spin" data-fa-transform = "down-5  right-5"></i>
  <i class = "fas fa-cog fa-3x fa-spin" data-fa-transform = "down-17 right-3"></i>
  <i class = "fas fa-cog fa-5x fa-spin" data-fa-transform = "left-7"></i>
</span>

Трансформация: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Размер: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

10.03.2019 20:37