角6z索引和动画问题

Question

我有这样的代码：

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

具有以下字体的图标代码(用于角使用FortAwesome)

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

我正试着让齿轮旋转，使齿轮漂浮在内容上。

我被卡住了。

任何输入都会有帮助。

Answer 1

要使fa-icon组件自旋，必须添加@fortawesome/angular文档中提到的[spin]="true"。

旋转的齿轮看起来不像你所期望的那样，它会把整个图标旋转成一个图像，要使齿轮单独旋转，你必须创建多个旋转图标与适当的大小和正确的位置。

如果位置不是绝对的，z指数就没有作用.

我建议将此代码作为启动解决方案：

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

这里是您的stackblitz编辑。

Answer 2

您需要将其更改为：

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

类fa-旋是需要旋转的图标，但我想你将需要另一个图标，因为整个图标正在旋转，你可能希望他们分开旋转。(对此不完全确定，从来没有用字体做过任何可怕的事情)

另外，我希望绝对定位是您在内容上浮动的意思。