服务器与VPS
促销优惠信息

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

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

wordpress网站使用Dashicons在导航菜单添加图标

发布时间:     阅读(158)

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

 

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

相关推荐

  • 暂无文章

评论 抢沙发

  • (必填)
  • (必填)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏