- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>The transformer icon, step 4</title>
<meta charset="utf-8">
<link rel="stylesheet" href="material.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="blue-theme">
<section class="card card-bordered">
<div class="menu-icon">
<span></span>
</div>
</section>
</body>
</html>
CSS
.menu-icon span {
display: block;
width: 100%;
height: 12px;
background-color: #40d47e;
}
.menu-icon span::before,
.menu-icon span::after {
display: block;
width: 100%;
height: 12px;
background-color: #40d47e;
content: "";
}
.menu-icon span::before {
transform: translate(0, -24px);
}
.menu-icon span::after {
transform: translate(0, 12px);
}
.menu-icon-open span {
transform: rotate(180deg);
}
.menu-icon-open span::before,
.menu-icon-open span::after {
width: 60%;
}
.menu-icon-open span::before {
transform: translate(45px, -14px) rotate(45deg);
}
.menu-icon-open span::after {
transform: translate(45px, 2px) rotate(-45deg);
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Set a smooth transition for all of the properties with a duration of 0.7s and with the shape ease-in-out for:
.menu-icon span,.menu-icon span::before, and.menu-icon span::after.
Click the icon to toggle the menu-icon-open class for it.
Comments