html页面
<!DOCTYPEhtml>
<htmllang="zh">
<head>
<metacharset="utf-8">
<linkrel="stylesheet"href="style.css">
<title>汉堡菜单按钮</title>
</head>
<body>
<divclass="app">
<labelclass="label16">
<inputclass="inp16"type="checkbox">
<spanclass="line16"></span>
<spanclass="line16"></span>
<spanclass="line16"></span>
</label>
</div>
</body>
</html>
css样式
/**style.css**/
.app{
width:100%;
height:100vh;
background-color:#ffffff;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.label16{
width:48px;
height:36px;
display:block;
position:relative;
cursor:pointer;
}
.inp16{
display:none;
}
.line16{
width:inherit;
height:4px;
border-radius:2px;
display:block;
background-color:#3d3d3d;
position:absolute;
top:0;
transition:all0.24sease-in-out;
}
.line16:nth-of-type(2){
top:16px;
}
.line16:nth-of-type(3){
top:32px;
}
.inp16:checked~.line16:nth-of-type(1){
transform:rotate(45deg);
top:16px;
}
.inp16:checked~.line16:nth-of-type(2){
width:0;
}
.inp16:checked~.line16:nth-of-type(3){
transform:rotate(-45deg);
top:16px;
}
|
运行时间载入中.....