一行CSS代码实现网站导航栏图标旋转效果 wordpress教程

经常会看到一些网站图标旋转效果很喜欢，那么怎么实现的呢？其实只要一行CSS代码就可以让你网站导航栏图标旋转起来，自己建站的朋友经常会对网站一些小细节修修改改，这也是一种乐趣。

图标旋转代码：

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

fa-spin是设置旋转属性，如果你使用wordpress建站并且网站图标用的是wordpress自带的dashicons图标，那么这里也要相应的修改的，比如你的分类图标是

<span class="dashicons dashicons-wordpress-alt"></span>

那么导航标签就可以写成

<span class="dashicons dashicons-wordpress-alt fa-spin"></span>

同理，你要想要其他图标旋转，添加旋转属性就可以了。如果你还没有使用这个图标服务，可以参考这个文章试一下，效果不错：

发布时间：2023-11-29 阅读(150)

其实这个导航栏图标旋转的CSS代码不仅仅限于wordpress建站有效，用在其他网站也可以实现图标旋转效果，而且也不仅仅限于导航栏，发散一下思维，我们也可以用于网站其他位置的图标效果。