Angular 6 个 z-index 和动画问题

Question

我有这个代码：

https://stackblitz.com/edit/angular-u1ctge

使用以下 Font Awesome 图标代码（angular 使用 FortAwesome）

<fa-icon [icon]='["fas","cogs"]' spin size='4x' style='z-index: 100; top: 10px; left: 60 px;'></fa-icon>

我正在尝试让齿轮旋转并让齿轮漂浮在内容上。

我卡住了。

任何输入都会有所帮助。

Answer 1

您需要将其更改为：

<fa-icon [icon]='["fas","cogs"]' size='4x' class="fa-spin" style='z-index: 100; top: 10px; left: 60 px; position: absolute;'></fa-icon>

class 需要 fa-spin 才能旋转图标，但我想您将需要另一个图标，因为整个图标都在旋转，您可能希望它们单独旋转。（对此不是很确定，从来没有用很棒的字体做过任何事情）

我也希望绝对定位是内容浮动的意思

Answer 2

要使 fa-icon 组件旋转，您必须添加 [spin]="true"，如 the @fortawesome/angular-fontawesome documentation 中所述。

旋转的齿轮不会像您预期的那样看起来，它会将整个图标作为一个图像旋转，要使齿轮单独旋转，您必须创建多个尺寸合适且位置合适的旋转图标。

如果位置不是绝对的，则 z-index 无效。

我建议将此代码作为起始解决方案：

<div style='position: absolute; z-index: 100; top: 50%; left: 40%;'>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='4x'></fa-icon>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='2x'></fa-icon>
</div>

Here is an edit of your stackblitz.

Angular 6 个 z-index 和动画问题

Angular 6 z-index and animation issues

z-index

css-animations

angular