经常会看到一些网站图标旋转效果很喜欢,那么怎么实现的呢?其实只要一行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建站有效,用在其他网站也可以实现图标旋转效果,而且也不仅仅限于导航栏,发散一下思维,我们也可以用于网站其他位置的图标效果。