按钮特效 | 西风前端

CSS3关键技术点：

transform
transition
box-sizing
border-radius

Transform

定义和用法
transform 属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜.

rotate(angle )定义 2D 旋转，在参数中规定角度
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

Transition

定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay
语法
transition: property duration timing-function delay;
值描述
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

box-sizing

定义和用法
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
语法
box-sizing: content-box|border-box|inherit
值描述

content-box
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

border-radius

定义和用法
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

幽灵按钮制作：

在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。国外的设计师称之为“幽灵按钮”（Ghost Buttons），盛赞这种按钮通透简约，贴合整体风格又不失神韵，别具魅力。

按钮及四周线条特效

难点：按钮四周线条特效
html代码片段：

<div class="box">
        <div class="link link-miss">
            <span class="icon"></span>
            <a href="#" class="button" data="My mission is clear">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                MISSION
            </a>
        </div>
        ...

css代码片段：

.box{ position: relative; width: 800px; height: 280px; margin: 50px auto;}
.box .link{ width: 205px; height: 280px; float: left; margin: 0 20px;}
.button{ position: relative; display: block; width: 180px; height: 50px; 
    line-height: 50px; text-decoration: none; color: #2dcb70; font-family: Arial; font-weight: bolder; border: 2px solid rgba(255,255,255,0.8); padding-left:20px; margin: 0 auto; box-sizing: border-box; 
    background: url(../images/allow.png) no-repeat 130px center; 
    transition: all .5s ease;}
.button:hover{ border: 2px solid rgba(255,255,255,1);
    background-position: 140px center;}
.button .line{ display: block; position: absolute; background: none; 
    transition: .4s ease;}
.button:hover .line{background: #fff;}
.button .line-top{ height: 2px; width: 0; left: -110%; top: -2px;}
.button:hover .line-top{width: 100%;left: -2px;}
.button .line-right{ width: 2px;  height: 0;  right: -2px;  top: -110%;}
.button:hover .line-right{height: 100%; top: -2px;}
.button .line-bottom{ width: 2px; height: 0; left: -2px;  bottom: -110%;}
.button:hover .line-bottom{height: 100%;bottom: -2px;}
.button .line-left{ height: 2px; width: 0; bottom: -2px; right: -110%;}
.button:hover .line-left{ width: 100%; right: -2px;}

提示框特效

难点：提示框与按钮框对齐
html代码片段：

<div class="box">
    ......
    <div class="tip"><em></em><span></span></div>
</div>

css代码片段：

.tip{  position: absolute;  padding: 0 14px;  height: 35px;  line-height: 35px;     background-color: #3dcb70;  color: #fff;  font-size: 18px;  
     margin: 0 auto;  border-radius: 3px;  top: 100px;  opacity: 0;}

.tip em{font-style: normal;}
.tip span{  display: block;  width: 0;  height: 0;  overflow: hidden;  
    border: 7px solid transparent;  border-top-color: #2dcb70;  
    position: absolute;  top: 35px;  left: 50%;  margin-left: -3px;}

JS代码片段：

$(function(){
    $(".link .button").hover(function(){
        var title=$(this).attr("data");
        $(".tip em").text(title);
        var pos=$(this).position().left+10;
        var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;
        var l=pos-dis;
        $(".tip").css({'left':l+"px"}).stop().animate({'top':145,'opacity':1},300);
    },function(){
        $(".tip").stop().animate({'top':100,'opacity':0},500);
    })
})