按钮图标
Material design风格浮动按钮特效
PetitQ
material-floating-button 是一款使用纯 Js 制作的 Material design 风格浮动按钮特效。该 Material design 风格浮动按钮特效提供 4 种动画特效，它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。
使用方法:
在页面中引入 mfb.css 和 mfb.js 文件。
也想出现在这里？联系我们吧
<link href="path/to/css/mfb.css" rel="stylesheet">
<script src="path/to/js/mfb.js"></script>
HTML 结构:
创建浮动按钮的 HTML 结构如下：
<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main">
<i class="mfb-component__main-icon--resting ion-plus-round"></i>
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="#" data-mfb-label="Child Button 1" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-github"></i>
</a>
</li>
<li>
<a href="#" data-mfb-label="Child Button 2" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-octocat"></i>
</a>
</li>
<li>
<a href="#"
data-mfb-label="Child Button 3" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-twitter"></i>
</a>
</li>
</ul>
</li>
</ul>
其中，使用的 class 的含义如下：
mfb-component–br：位置 class，可用的还有：mfb-component–tl, mfb-component–br, mfb-component–tr, mfb-component–bl
mfb-zoomin：动画方式，可选的有：mfb-zoomin, mfb-slidein, mfb-slidein-spring 和 mfb-fountain
data-mfb-toggle='hover'：打开按钮的事件，如果需要点击打开按钮，可以将事件切换为 click
material-floating-button 浮动按钮特效的 github 地址是：https://github.com/nobitagit/material-floating-button
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
