Font Awesome 5 - 动画齿轮，如何排列不同的图标? [英] Font Awesome 5 - animated cogs, How to arrange different icons?

问题描述

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

我创造了一个我似乎能够得到的最接近的小提琴.小提琴在这里https://jsfiddle.net/rke45798/13/

.slow-ani {-webkit-animation:fa-spin 6s 无限线性；动画:fa-spin 6s 无限线性；}.fa-小{字体大小:84px；}.fa-med {字体大小:70px；}.fa-lge {字体大小:48px；}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/所有.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>

我在上图中显示的安排是否可以实现?如果是这样，是否有任何可以应用的 CSS 技巧?

解决方案

您可以使用 Font Awesome 提供的类来实现此目的.最好考虑使用 SVG 版本以轻松管理此问题.

.slow-ani >* {动画持续时间:5s；}

<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></脚本><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/如何使用/在网络上/样式/电源转换

尺寸:https://fontawesome.com/如何使用/在网络上/样式/大小图标

I am trying to arrange the font awesome animated cogs in a very particular way (as per image below)

I have created a fiddle of the closest I seem to be able to get. The fiddle is here 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>

Is the arrangement I've shown in the image above achievable? If so are there any CSS tricks that can be applied?

解决方案

You can use the classes provided by Font Awesome to achieve this. Better consider the SVG version to easily manage this.

.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>

Transformation: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Sizing: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

这篇关于Font Awesome 5 - 动画齿轮，如何排列不同的图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！