Skip to content

Instantly share code, notes, and snippets.

@TianyiLi

TianyiLi/index.html

Created December 11, 2018 06:06
Show Gist options
  • Save TianyiLi/d47035e139f1095f6d576ba162019e9b to your computer and use it in GitHub Desktop.
Save TianyiLi/d47035e139f1095f6d576ba162019e9b to your computer and use it in GitHub Desktop.
Download ZIP
nav-icon animation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#nav-check {
display: none;
}
.menu-icon {
height: 50px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
}
.line {
width: 60%;
height: 2px;
line-height: 50px;
position: relative;
background: black;
transition: all 0.3s;
}
.menu-icon:before,
.menu-icon:after {
background: black;
content: '';
width: 60%;
position: absolute;
height: 2px;
top: 12px;
bottom: 12px;
right: 0;
left: 0;
display: block;
margin: auto;
transition: all 0.3s;
}
.menu-icon:before {
bottom: auto;
}
.menu-icon:after {
top: auto;
}
#nav-check:checked ~ .menu-icon .line {
opacity: 0;
transform: scale(0)
}
#nav-check:checked ~ .menu-icon:after {
transform: translateY(-12px) rotate(135deg);
}
#nav-check:checked ~ .menu-icon:before {
transform: translateY(12px) rotate(-135deg);
}
</style>
</head>
<body>
<input id="nav-check" type="checkbox" name="nav-check">
<label class="menu-icon" for="nav-check"><div class="line"></div></label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment