一行代码让你的菜单图标旋转起来

博主： wm88990
发布时间：2017 年 08 月 21 日
1129 次浏览
暂无评论
300字数
分类： PHP

Loading...

<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">之前到处逛博客的时候发现博客菜单有一个图标一直在转，觉得很稀奇。于是就查看了下样式，把这个样式添加上就可以让你的小图标旋转起来。</span> 
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">在主题的</span><code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:13.5px;padding:2px 4px;color:#C7254E;border-radius:4px;line-height:25px;text-indent:30px;white-space:normal;background-color:#F9F2F4;">main.css</code><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">中，添加如下代码：</span><br />
</span> 
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"> </span> 
</p>
<pre class="prettyprint lang-php linenums">.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}</pre>
<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">然后再菜单里，将</span><code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:13.5px;padding:2px 4px;color:#C7254E;border-radius:4px;line-height:25px;text-indent:30px;white-space:normal;background-color:#F9F2F4;">.fa-spin</code><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">添加到菜单中。然后就可以看到图标旋转了</span> 
<p>
	<br />
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"> </span> 
</p>
<pre class="prettyprint lang-php linenums">&lt;i class="fa fa-wordpress fa-spin"&gt;&lt;/i&gt;博客建设</pre>
<br />
<p>
	<br />
</p>

最后修改：1970 年 01 月 01 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

一行代码让你的菜单图标旋转起来

wm88990 • 2017 年 08 月 21 日

Loading...

<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">之前到处逛博客的时候发现博客菜单有一个图标一直在转，觉得很稀奇。于是就查看了下样式，把这个样式添加上就可以让你的小图标旋转起来。</span> 
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">在主题的</span><code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:13.5px;padding:2px 4px;color:#C7254E;border-radius:4px;line-height:25px;text-indent:30px;white-space:normal;background-color:#F9F2F4;">main.css</code><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">中，添加如下代码：</span><br />
</span> 
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"> </span> 
</p>
<pre class="prettyprint lang-php linenums">.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}</pre>
<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">然后再菜单里，将</span><code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:13.5px;padding:2px 4px;color:#C7254E;border-radius:4px;line-height:25px;text-indent:30px;white-space:normal;background-color:#F9F2F4;">.fa-spin</code><span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;">添加到菜单中。然后就可以看到图标旋转了</span> 
<p>
	<br />
</p>
<p>
	<span style="color:#555555;font-family:'Microsoft Yahei';font-size:15px;line-height:25px;text-indent:30px;white-space:normal;background-color:#FFFFFF;"> </span> 
</p>
<pre class="prettyprint lang-php linenums">&lt;i class="fa fa-wordpress fa-spin"&gt;&lt;/i&gt;博客建设</pre>
<br />
<p>
	<br />
</p>