Day23-按钮分身术(上)_纯CSS汉堡图样与改变

今天明天要来写纯CSS可控制的按钮分身术
感谢室友的idea提供~

之前在重写网站时的首页按钮也是类似的效果
只要把改变的位置更改就能做出不同的样子了

今天的部分着重在控制按钮的汉堡图样变化

先写架构
跟Day10一样用checkbox做开关，打开时出现按钮，关掉时按钮隐藏

写一个input跟一个label，帮input设置id，label设置for绑定input的id
绑定完成後点击label也能开关input

<input class="menu-check" type="checkbox" id="menu-check" />
<label class="menu-open-button" for="menu-check">label</label>

绑定完成後我们就能把input设display: none; 隐藏起来
然後我先帮label加一些图样
预想是平常是汉堡图样☰，打开时是叉叉图样✖
因为我没有要用到JS，所以要在CSS自己写图样
先在label内设置一个div，因为汉堡图样是三横杠，所以要在div里面加上三个span

<div class="ham">
    <span></span>
    <span></span>
    <span></span>
</div>

然後进入CSS
帮span的父层ham设一个大小让span比较好长大

.ham {
    width: 60px;
    height: 60px;
}

先写span共同的部分
长宽跟颜色是大家都一样的东西就设在一起

.ham span {
    position: absolute;
    height: 6px;
    width: 100%;
    background: #1FAF87;
}

各自的部分，因为我们没设class分别，就直接用CSS的:nth-child()
第一个长在最高，第二个中间，第三个最低

.ham span:nth-child(1) {
    top: 0%;
}
.ham span:nth-child(2) {
    top: 50%;
}
.ham span:nth-child(3) {
    top: 100%;
}

然後来写变化
变化的部分用:checked来辨别，当.menu-check:checked时去做改变
上面跟下面的横杠要各自顺跟逆时针转45度，变成叉叉的两杠，中间那杠隐藏起来就可以了

.menu-check:checked+.menu-open-button span:nth-child(1) {
    transform: rotate(45deg);
}
.menu-check:checked+.menu-open-button span:nth-child(2) {
    transform: scaleX(0);
}
.menu-check:checked+.menu-open-button span:nth-child(3) {
    transform: rotate(-45deg);
}

完成後点击就会有变化了

但我们发现改变後的位置有点怪怪的，因为预设的旋转基准点是在图的正中心
我们需要把改变位置改到左边的中间，让上下各自以左边为旋转中心做旋转
在共同处新增一个改变旋转中心的语法

.ham span{
    transform-origin: left center;
}

然後我们又发现，叉叉的脚好像有一点点短，因为旋转後的杠杠，如同三角形的斜边，而斜边的长度一定会大於两边的长，所以我们需要让他在改变後长长一点点，这边看大家设置的三条杠杠距离是多少会有所不同，我是变成140%左右

接着根据需要美化一下，我这边有把长宽跟位置做一些改变，变成我希望的比例
最後在.ham span加上transition: 0.25s ease-in-out; 让变化时有转场的效果

这样便完成汉堡图样的变化了