v1.0核心
v1.0实例
v2.0

Deform 变形按钮

使用说明

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

常规变形按钮

本框架定义了四种变形按钮，分别是ax-i(字母i是info的缩写)，ax-e(大写E近似于菜单图标)，ax-t(小写t近似于添加图标)，ax-x(字母x近似于关闭图标)。常规变形按钮宽高38px，灰色按钮。

                                <a href="###" class="ax-deform ax-i"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x"><i class="ax-1"></i><i class="ax-2"></i></a>

反转按钮

使用ax-reverse类创建黑底白字似的按钮。

                                <a href="###" class="ax-deform ax-i ax-reverse"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-reverse"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-reverse"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-reverse"><i class="ax-1"></i><i class="ax-2"></i></a>

按钮尺寸

按钮尺寸有大中小三种：大按钮用ax-lg类表示，宽高是54px；中按钮用ax-sm表示，是默认，宽高38px；小按钮用ax-md类表示，宽高是28px。

                                <a href="###" class="ax-deform ax-i ax-sm"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-sm"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-sm"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-sm"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-deform ax-i"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-deform ax-i ax-lg"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-lg"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-lg"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-lg"><i class="ax-1"></i><i class="ax-2"></i></a>

边框

按钮默认是带3px圆角的，可使用ax-square和ax-circle类改变按钮的形状；使用ax-border类显示按钮的边框。

                                <a href="###" class="ax-deform ax-i ax-border"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-border"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-border"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-border"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-deform ax-i ax-border ax-square"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-border ax-square"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-border ax-square"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-border ax-square"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-deform ax-i ax-border ax-circle"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-border ax-circle"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-border ax-circle"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-x ax-border ax-circle"><i class="ax-1"></i><i class="ax-2"></i></a>

按钮颜色

按钮的颜色可使用：ax-primary，ax-secondary，ax-success，ax-danger，ax-warning，ax-info，ax-ad，ax-ignore。可配合ax-reverse类创建带背景色的按钮。

                                <a href="###" class="ax-deform ax-i ax-border"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-primary"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-secondary"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-success"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-danger"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-warning"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-info"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-ad"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-border ax-ignore"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-deform ax-i ax-reverse"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-primary"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-secondary"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-success"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-danger"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-warning"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-info"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-ad"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-i ax-reverse ax-ignore"><i class="ax-1"></i><i class="ax-2"></i></a>

禁止操作

使用ax-disabled类建带背景色的按钮。

                            <a href="###" class="ax-deform ax-e ax-border ax-disabled"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                            <a href="###" class="ax-deform ax-e ax-reverse ax-disabled"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                            <a href="###" class="ax-deform ax-e ax-reverse ax-primary ax-disabled"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>

变形动画 JS

在一般场景中，点击ax-i，ax-e，ax-t会变形为ax-x，再次点击ax-x会恢复到初始状态。

重置
JS HTML 
  • <script type='text/javascript'>
    $(document).ready(function () {
        $("#i").click(function () {
            if($(this).hasClass("ax-x")){
                $(this).removeClass("ax-x").addClass("ax-i");
            }else{
                $(this).removeClass("ax-i").addClass("ax-x");
            }
        });
        $("#e").click(function () {
            if($(this).hasClass("ax-x")){
                $(this).removeClass("ax-x").addClass("ax-e");
            }else{
                $(this).removeClass("ax-e").addClass("ax-x");
            }
        });
        $("#t").click(function () {
            if($(this).hasClass("ax-x")){
                $(this).removeClass("ax-x").addClass("ax-t");
            }else{
                $(this).removeClass("ax-t").addClass("ax-x");
            }
        });
        $("#reset").click(function () {
            $('#e').removeClass("ax-x").addClass("ax-e");
            $('#i').removeClass("ax-x").addClass("ax-i");
            $('#t').removeClass("ax-x").addClass("ax-t");
        });

    });
</script>
                        
  •                                 <a href="###" class="ax-deform ax-i ax-border" id="i"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <a href="###" class="ax-deform ax-e ax-border" id="e"><i class="ax-1"></i><i class="ax-2"></i><i class="ax-3"></i></a>
                                <a href="###" class="ax-deform ax-t ax-border" id="t"><i class="ax-1"></i><i class="ax-2"></i></a>
                                <div class="ax-break"></div>
                                <a href="###" class="ax-btn" id="reset">重置</a>