CSS3 "transition" 和 "animation" 属性制作动效按钮

按钮.gif

这个图标很简单，就是一个圆形背景+三个 height为1px的矩形组成，第一条线向上位移8px，中间那条线旋转180度，第三条线向下位移8px。

结构

样式

.button {
    width: 50px;
    height: 50px;
    border-radius: 25px;   
    background-color: #575859;
    cursor: pointer;
}
.lines span {
    display: block; 
    width: 20px;
    height: 1px;
    background-color: #fff;
    margin-bottom: 4px;  
    margin-left: auto;
    margin-right: auto;
}
.lines {
    padding-top: 19px;   
}

首先制作背景圆形， 圆角设置25px正好是边长的一半从而得到圆形效果。接着把span设置成线条，下边距拉开每条线之间的距离，并利用margin让线条移动到圆形按钮的中间。padding-top: 19px的由来：50px - (三条线的宽度3x1 + 下边距4x2)/2 = 18.5 。
接下来设置动画：设置横线动画的名字／播放时间／播放方式／播放次数。

.button span{
   -webkit-animation: all 1s ease-in-out 1; 
}
/*--调用每一条横线的动画名称--*/
.button:hover span:nth-of-type(1){
   -webkit-animation-name:top;
}
.button:hover span:nth-of-type(2){
   -webkit-animation-name:middle;
}
.button:hover span:nth-of-type(3){
   -webkit-animation-name:bottom;
}

/*--设置关键帧--*/
@-webkit-keyframes top {
    0% { transform: translate(0,0)}
    50% { transform: translate(0,-8px)}     /*--上移--*/
    60% { transform: translate(0,-8px)}
    100% { transform: translate(0,0)}
}
@-webkit-keyframes middle {
    0% { transform: rotate(0deg)}
    100% { transform: rotate(180deg)}     /*--旋转--*/
}
@-webkit-keyframes bottom {
    0% { transform: translate(0,0)}
    50% { transform: translate(0,8px)}    /*--下移--*/
    60% { transform: translate(0,8px)}
    100% { transform: translate(0,0)}
}

 * 为了写的时候脑子没那么乱，没有区分不同浏览器对动画属性的兼容问题。

不敢相信，这么小的东西，我弄了这么久。用这种方法做了一个:active的效果，但是点击按钮之后并不能完全显示:active动画，要长按按钮才能显示完整，还马上又变成:hover的动画，摔。