当前位置：首页 > 网页特效 > 按钮特效

Material design风格浮动按钮特效

分类：按钮特效日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入mfb.css和mfb.js文件。

```html
<link href="path/to/css/mfb.css" rel="stylesheet">
<script src="path/to/js/mfb.js"></script> 
``` 
##### HTML结构
创建浮动按钮的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">
 
 
 </a>
 <ul class="mfb-component__list">
 <li>
 <a href="#" data-mfb-label="Child Button 1" class="mfb-component__button--child">
 
 </a>
 </li>
 <li>
 <a href="#" data-mfb-label="Child Button 2" class="mfb-component__button--child">
 
 </a>
 </li>
 <li>
 <a href="#"
 data-mfb-label="Child Button 3" class="mfb-component__button--child">
 
 </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。

web299.com

Material design风格浮动按钮特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果