- {
padding: 0; margin: 0;
}
body {
position: relative; font-family: 'Open Sans', sans-serif;
} body .wrapper {
width: 100%; height: 100vh; background-image: url("igem.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
position: absolute; overflow: hidden;
} body .wrapper span {
z-index: 9999; position: absolute; top: 20px; left: 10px; width: 35px; height: 4px; background: #ffffff; cursor: pointer;
} body .wrapper span:before, body .wrapper span:after {
display: block; position: absolute; content: ; left: 0; height: 4px; width: 35px; background: #ffffff;
} body .wrapper span:before {
top: -8px;
} body .wrapper span:after {
bottom: -8px;
} body .wrapper .title {
position: absolute; top: 50%; left: 50%; height: 100px; margin-top: -50px; width: 50%; margin-left: -25%; text-align: center;
} body .wrapper .title h1 {
color: #30C4C9;
} body .wrapper .overlay {
position: absolute; bottom: -99%; height: 100%; background: #30C4C9; left: 0; width: 100%; transition: all 0.5s ease;
} body .wrapper .overlay.anim {
left: 0; bottom: 0; animation: menu-anim 1.5s 1 ease-out normal; width: 25%; transition: all 0.5s ease;
} body .wrapper .overlay.anim.reverse-anim {
left: 0; bottom: 0; animation: menu-anim 1.5s 1 ease-out reverse; width: 25%; transition: all 0.5s ease;
} body .wrapper .overlay ul {
width: 100%; text-align: center; margin-top: 100px; padding-left: 0; margin-left: -10px; font-size: 2em; font-weight: 800;
} body .wrapper .overlay ul li {
margin: 10px 0;
} body .wrapper .overlay ul li a {
text-decoration: none; color: white; position: relative; display: inline-block; padding: 10px 0; overflow: hidden;
} body .wrapper .overlay ul li a:after {
display: block; border-radius: 2px; content: ; left: 0; bottom: -10px; height: 5px; background: #ffffff; transform: translateX(-101%);
} body .wrapper .overlay ul li a:hover {
text-decoration: none;
} body .wrapper .overlay ul li a:hover:after {
animation: border-anim 0.5s 1 ease normal; transform: translateX(0);
} body .scrolling{ height:800px; background-color:yellow; } @-webkit-keyframes border-anim {
0% { transform: translateX(-100%); } 100% { transform: translateX(0); }
} @-webkit-keyframes menu-anim {
0% { left: 0; bottom: -99%; width: 100%; } 33% { left: -99.5%; bottom: -99%; width: 100%; } 66% { left: -99.5%; bottom: 0; width: 100%; } 100% { bottom: 0; left: 0; width: 25%; }
}