全屏展开的按钮特效

一款全屏展开的按钮特效，点击每一个图标按钮，都有一个全屏展开显示更多信息的效果，信息的内容可以自由修改或添加，整个特效过程还时比较平滑的，喜欢的童鞋请收下吧。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，引入图标字体库和CSS样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，分别设置好各个图标按钮的容器，代码如下：

<div id="fsm_container" class="fsm-container">
	<div class="fsm apple">
		<i class="fa fa-qq"></i>
		<h1 class="modal-content">腾讯QQ</h1>
	</div>
	<div class="fsm pied">
		<i class="fa fa-weixin"></i>
		<h1 class="modal-content">微信</h1>
	</div>
	<div class="fsm codepen">
		<i class="fa fa-weibo"></i>
		<h1 class="modal-content">微博</h1>
	</div>
	<div class="fsm google">
		<i class="fa fa-renren"></i>
		<h1 class="modal-content">人人网</h1>
	</div>
</div>

页面的底部引入一个JS插件，来响应点击后的全屏事件，代码如下：

<script type="text/javascript" src="js/index.js"></script>