html - Font Awesome 5 - 动画齿轮，如何排列不同的图标？

Question

我正在尝试以一种非常特殊的方式排列 Font Awesome 动画齿轮(如下图所示)

我已经创建了一个我似乎能够得到的最接近的 fiddle 。 fiddle 在这里 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 技巧？

Answer 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