Question

我想创建一个汉堡菜单。我做到了，但是转换存在一些问题。我想在 checkbox:checked first transform: translateY (before and after) 到 0px 点之后做，然后 transform rotateZ 工作。

.menu-btn,
.menu-btn::before,
.menu-btn::after
{
    cursor:pointer;
    display: block;    
    width: 20px;
    height: 2px;
    background: red;
    transition: 0.5s;
}
.menu-btn::before{
    content: '';
    position: absolute;
    transform: translateY(-8px);
}
.menu-btn::after{
    content: '';
    position: absolute;
    transform: translateY(8px);
}
input:checked + .menu-btn::after{
    transform: translateY(0px) rotateZ(-45deg);
    

}
input:checked + .menu-btn::before{
    transform: translateY(0px) rotateZ(45deg);
    
}
input:checked + .menu-btn{
    background: transparent;    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="menu-btn.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <label class="container">
        <input type="checkbox">
        <span class="menu-btn"></span>
    </label>
</body>
</html>

汉堡菜单变换

0 个答案: