Day24-按钮分身术(下)_我的分身想去哪

今天来继续写按钮分身术

昨天完成了控制钮的部分
今天来写分身按钮
在HTML的label下面新增需要的按钮数量

<a class="menu-item menu-item1" href="#HOME">
    <i class=" fas fa-home"></i></a>
<a class="menu-item menu-item2" href="#ABT">
    <i class="fas fa-list"></i></a>
<a class="menu-item menu-item3" href="#INTRO">
    <i class="fab fa-pagelines"></i></a>
<a class="menu-item menu-item4" href="#RECOMMEND">
    <i class="fas fa-envelope"></i></a>
<a class="menu-item menu-item5" href="#OTHERS">
    <i class="fas fa-ellipsis-h"></i></a>

我这边是直接用Font Awesome的图示代表各个按钮

然後先帮分身按钮来加上统一的样式，并设成position: absolute; 让所有的按钮重叠

.menu-item {
    width: 60px;
    height: 60px;
    position: absolute;
    background-color: #1FAF87;
    display: grid;
    justify-items: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    color: white;
    font-size: 30px;
}

因为设了position: absolute; 的关系，所有按钮都会重叠在一起，这样我们就无法点击到我们的控制钮了，所以需要把控制钮的图层拉到最高

.menu-open-button {
    z-index: 100;
}

为了把让分身可以完美的被控制钮挡住，帮控制钮设上一样的样式

.menu-open-button {
    background-color: #1FAF87;
}
.ham span {
    background: white;
}

接着我们一样使用.menu-check:checked来帮每个分身做设定
我这边示范图是让他往下分身，所以就把每个分身设往下移动的距离
利用transform: translate3d(); 可以让每个分身以一开始设定的位置去移动XY或Z
也因为是使用转场的移动所以会自带转场的感觉不会是直接出现的感觉

.menu-check:checked~.menu-item1 {
    transform: translate3d(0, 100px, 0);
}
.menu-check:checked~.menu-item2 {
    transform: translate3d(0, 200px, 0);
}
.menu-check:checked~.menu-item3 {
    transform: translate3d(0, 300px, 0);
}
.menu-check:checked~.menu-item4 {
    transform: translate3d(0, 400px, 0);
}
.menu-check:checked~.menu-item5 {
    transform: translate3d(0, 500px, 0);
}

根据希望的长相去把每个分身改变点及控制钮以後的位置，可以做出很多不同的变化
只改变X轴就是往横的分身
都设置的话可以像我之前做的一样像是一个半圆形，或是其他自己想要的移动轨迹

这边为了让控制钮有一点变化，另外帮控制钮设置了点击打开的状态会变小

.menu-check:checked+.menu-open-button {
    transform: scale(0.75, 0.75);
}

接着，虽然刚刚提到，因为是使用transform: translate3d(); 去改变位置，所以有自带转场的感觉，但还是可以帮个别按钮设置转场时长
做出一点一个一个出去跟收回的效果

.menu-item1 {
    transition: transform ease-out 200ms;
}
.menu-item2 {
    transition: transform ease-out 260ms;
}
.menu-item3 {
    transition: transform ease-out 320ms;
}
.menu-item4 {
    transition: transform ease-out 380ms;
}
.menu-item5 {
    transition: transform ease-out 440ms;
}

切记transition: transform ease-out 440ms; 这种控制转场的时间跟时间曲线的程序码，要打在一开始的class中，不能打在比如:hover或:checked+的class中，这样会是只有出去或收回时才有转场时间曲线的效果，无法达到出去与收回都有效果