纯CSS 实现汉堡式菜单与返回箭头转换动画

汉堡式菜单，由三根平行的直线组成；返回箭头，由两个对称倾斜的箭帽和一条水平直线组成。下面我们就通过使用 CSS 来实现上图的转换效果。
实际效果见banner。

HTML

<div class="toggleContainer">
    <div class="inner">
        <span class="line line-first"></span>
        <span class="line line-second"></span>
        <span class="line line-third"></span>
    </div>
</div>

span.line 表示三条直线
div.inner 负责包裹三条直线，直线的位置会相对于它进行变化
toggleContainer 负责最外围的包裹，用来设置 padding，起美化作用

白色直线的 CSS

.inner .line{
    /** 使其可设置大小 **/
    display: inline-block;
    /** 长度扩展整个父元素 **/
    width: 100%;
    height: 8px;
    /** 用来设置动画 **/
    transition: all .5s;
    /** 相对于 .inner 进行定位**/
    position: absolute;
    left: 0;
    background: #fff;
}
.inner .line-first{
    /** 第一条直线居上 **/
    top: 0;
}
.inner .line-second{
    /** 第二条直线垂直居中 **/
    top: 50%;
    transform: translate(0, -50%);
}
.inner .line-third{
    /** 第三条直线居下 **/
    bottom: 0;
}

div.inner 和 div.toggleContainer 的CSS

.inner{
    /** 填充整个父元素 **/
    width: 100%;
    height: 100%;
    /** 使其子元素相对其进行定位 **/
    position: relative;
}
.toggleContainer {
    /** 设置大小 **/
    width: 80px;
    height: 70px;
    /** 增加内边距，美观 **/
    padding: 14px 10px;
    box-sizing: border-box;
    background: #222;
    cursor: pointer;
}

经过上面的设置后，已经能够看到一个汉堡菜单了，接下来就需要编写 hover 时的 CSS，让三条线动起来。

给三条线做CSS动画

/** 首先让第一条线动起来 **/
.toggleContainer:hover .line-first{
    /** 设置动画时间和属性 **/
    transition: all 0.5s;
    /** 缩短长度 **/
    width: 50%;
    /** 旋转-45度 **/
    transform: rotate(-45deg);
    /** 往下移动，与第二条线重叠 **/
    top: 5px;
    left: -1px;
}
/** 再让第三条线动起来 **/
.toggleContainer:hover .line-third{
    transition: all 0.5s;
    width: 50%;
    transform: rotate(45deg);
    bottom: 5px;
    left: -1px;
}