material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效。该Material design风格浮动按钮特效提供4种动画特效,它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。
安装
可以通过npm来安装该插件。
npm install mfb --save
使用方法
在页面中引入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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!