首页
核心
实例
资源
关于
v1.0

Deform 变形按钮

使用说明

我们经常在一些比较潮的网页中见到可变形的按钮，按钮中的元素不是图标也不是图片，而是html标签，通过对标签元素进行旋转、拉伸、透明度等动画操作实现变形。实现按钮点击变形动画效果需要使用一点点js。

常规变形按钮

本框架定义了四种类型变形按钮，分别是info，menu，add，close。常规变形按钮宽高38px，灰色按钮。

                                <a href="###" class="ax-deform" type="info"><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="menu"><i></i><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="add"><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="close"><i></i><i></i></a>

反转按钮

对按钮追加reverse属性可创建黑底白字似的按钮。

                                    <a href="###" class="ax-deform" type="info" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" reverse><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" reverse><i></i><i></i></a>

按钮尺寸

通过size属性定义按钮尺寸，按钮尺寸有大中小三种：lg大按钮，宽高是54px；md常规按钮即默认尺寸，宽高38px；sm小按钮，宽高是28px。

                                    <a href="###" class="ax-deform" type="info" size="sm"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" size="sm"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" size="sm"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" size="sm"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-deform" type="info"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-deform" type="info" size="lg"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" size="lg"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" size="lg"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" size="lg"><i></i><i></i></a>

外形

通过shape属性定义按钮外形，square表示方形边框外形；radius表示3px圆角边框外形，即默认外形；round圆形边框外形。

                                    <a href="###" class="ax-deform" type="info" shape="square"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" shape="square"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" shape="square"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" shape="square"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-deform" type="info" shape="radius"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" shape="radius"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" shape="radius"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" shape="radius"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-deform" type="info" shape="round"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" shape="round"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" shape="round"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="close" shape="round"><i></i><i></i></a>

按钮颜色

通过theme属性定义按钮颜色，可选颜色：primary，success，danger，warning，info，question，ignore。可配合reverse属性创建带背景色的按钮。

                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="primary"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="success"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="error"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="warning"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="info"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="question"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="ignore"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="primary" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="success" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="error" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="warning" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="info" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="question" reverse><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="info" shape="radius" theme="ignore" reverse><i></i><i></i></a>

禁止操作

对按钮追加disabled属性表示禁用按钮。

                                <a href="###" class="ax-deform" type="info" shape="radius" disabled><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="menu" shape="radius" disabled><i></i><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="add" shape="radius" disabled><i></i><i></i></a>
                                <a href="###" class="ax-deform" type="close" shape="radius" disabled><i></i><i></i></a>

变形动画

在一般场景中，点击info，menu，add类型按钮会变形为close类型，再次点击close类型则恢复到初始状态。

重置
JS HTML 
  •                                         let info = document.querySelector('#info'),
                                            menu = document.querySelector('#menu'),
                                            add = document.querySelector('#add'),
                                            reset = document.querySelector('#reset');
                                        info.onclick = function () {
                                            if (this.getAttribute('type') === 'close') {
                                                this.setAttribute('type', 'info');
                                            } else {
                                                this.setAttribute('type', 'close');
                                            }
                                        }
                            
                                        menu.onclick = function () {
                                            if (this.getAttribute('type') === 'close') {
                                                this.setAttribute('type', 'menu');
                                            } else {
                                                this.setAttribute('type', 'close');
                                            }
                                        }
                            
                                        add.onclick = function () {
                                            if (this.getAttribute('type') === 'close') {
                                                this.setAttribute('type', 'add');
                                            } else {
                                                this.setAttribute('type', 'close');
                                            }
                                        }
                            
                                        reset.onclick = function () {
                                            info.setAttribute('type', 'info');
                                            menu.setAttribute('type', 'menu');
                                            add.setAttribute('type', 'add');
                                        }
                        
  •                                     <a href="###" class="ax-deform" type="info" shape="radius" id="info"><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="menu" shape="radius" id="menu"><i></i><i></i><i></i></a>
                                    <a href="###" class="ax-deform" type="add" shape="radius" id="add"><i></i><i></i></a>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn" id="reset">重置</a>