Material design风格浮动按钮特效

所属分类:UI,导航,输入-悬停,其他导航,定制和风格

 23593  244  查看评论 (1)
分享到微信朋友圈
X
Material design风格浮动按钮特效 ie兼容10

Material Floating Button

material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效。该Material design风格浮动按钮特效提供4种动画特效,它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。

在此处查看演示以查看实际效果

Material floating button

安装

可以通过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。

相关插件-悬停,其他导航,定制和风格

12种CSS3 hover效果插件

非常好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验
  悬停
 59544  488

jQuery hover时实现浮动

以简单的实现hover是的效果,加入了延时误操作处理鼠标快速滑过不会被触发。
  悬停
 36244  411

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果,图片上有简短标题和说明,兼容主流浏览器
  悬停
 32628  424

css鼠标悬停效果,自适应页面大小

网站常用功能展示,css鼠标悬停效果
  悬停
 19334  287

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    汾沂 0
    2022/7/25 17:25:41
    只能显示4个按钮,我多加了几个li发现多余的就不会显示了,请问有解决办法吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复