HTML&CSS：手把手教你实现优雅的汉堡菜单图标这段代码是一个 HTML 页面，它包含了内联的 CSS 样式，用于创建

这段代码是一个 HTML 页面，它包含了内联的 CSS 样式，用于创建一个汉堡菜单图标，这个图标可以通过复选框控制显示和隐藏。点击获取更多

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .burger {
            position: relative;
            width: 40px;
            height: 30px;
            background: transparent;
            cursor: pointer;
            display: block;
        }

        .burger input {
            display: none;
        }

        .burger span {
            display: block;
            position: absolute;
            height: 4px;
            width: 100%;
            background: black;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: .25s ease-in-out;
        }

        .burger span:nth-of-type(1) {
            top: 0px;
            transform-origin: left center;
        }

        .burger span:nth-of-type(2) {
            top: 50%;
            transform: translateY(-50%);
            transform-origin: left center;
        }

        .burger span:nth-of-type(3) {
            top: 100%;
            transform-origin: left center;
            transform: translateY(-100%);
        }

        .burger input:checked~span:nth-of-type(1) {
            transform: rotate(45deg);
            top: 0px;
            left: 5px;
        }

        .burger input:checked~span:nth-of-type(2) {
            width: 0%;
            opacity: 0;
        }

        .burger input:checked~span:nth-of-type(3) {
            transform: rotate(-45deg);
            top: 28px;
            left: 5px;
        }
    </style>
</head>

<body>
    <label class="burger" for="burger">
        <input type="checkbox" id="burger">
        <span></span>
        <span></span>
        <span></span>
    </label>

</body>

</html>

HTML 结构

burger：定义了一个标签元素，用于包含汉堡菜单图标，并应用了类名 burger 来应用 CSS 样式。for 属性与下面的复选框的 id 相对应，使得点击整个标签都能切换复选框的状态。
checkbox burger：定义了一个复选框元素，用于控制汉堡菜单图标的开关状态，并且它有一个 ID 为“burger”。
span：三个 span 元素，用于创建汉堡菜单的三条横线。

CSS 样式

body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
.burger：定义了汉堡菜单容器的基本样式，包括位置、尺寸、背景色、光标样式和显示方式。
.burger input：定义了复选框的样式，使其不可见（display: none;）。
.burger span：定义了汉堡菜单三条横线的基本样式，包括显示方式、位置、尺寸、背景色、圆角和过渡效果。
.burger span:nth-of-type(n)：使用 CSS 选择器为每条横线定义不同的初始位置和变换原点。
.burger input:checked~span:nth-of-type(n)：当复选框被选中时，改变横线的样式，包括旋转角度、位置和宽度。