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

谷歌Quantum Paper风格按钮变形动画特效

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

简介

使用这个Quantum Paper效果需要引入所有的依赖文件，以及Quttons.js和Quttons.css文件。

```html
<link rel = "stylesheet" href = "Path/To/Quttons.css" />
<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script> 
```               
#####  HTML结构
然后你需要制作弹出对话框的内容，你可以使用div来制作，样式可以自定义。你可以为对话框中的按钮添加事件监听，还可以添加一个关闭按钮，只需要在按钮上添加close class。下面是demo中文件上传对话框的HTML结构。

```html
<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload"> Choose a file to upload
    </div>
</div>      
```        
然后将上面制作好的对话框包裹进一个带qutton class的div中，并给它设置一个ID号。

```html
<div class = "qutton" id = "qutton_upload">
 ...(上一步中创建的对话框代码) ...
</div>  
```              
#####  初始化插件
在页面加载完毕之后，就可以使用下面的方法来初始化这个Quantum Paper插件。

```html
var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
    icon : './images/icon_upload.png',
    backgroundColor : "#917466"
});  
```       
在getInstance()中你需要传入前面包裹div中设置的ID号。init()方法中可以传入自定义的配置参数。

#####  配置参数
这个Quantum Paper插件的可用参数如下：

|  参数 |  描述 | 默认值  |
| ------------ | ------------ | ------------ |
|icon|在Qutton中显示的图标|None|
|backgroundColor|Qutton的背景颜色|#FE0000|
|width|Qutton的宽度|60|
|height|Qutton的高度|60|
|easing|动画的easing效果|easeInOutQuint|

web299.com

谷歌Quantum Paper风格按钮变形动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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