按钮.gif
这个图标很简单，就是一个圆形背景+三个
height为1px的矩形组成，第一条线向上位移8px，中间那条线旋转180度，第三条线向下位移8px。
<html>结构
<body>
<div class="button">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<css>样式
.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的动画，摔。
