全屏菜单弹出效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { max-height: 100%; height: 100%; padding: 0; margin: 0; font-family: "Helvetica Neue","Helvetica",Arial,sans-serif; background: #ee0979; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #ff6a00, #ee0979); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ff6a00, #ee0979); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } * { box-sizing: border-box; } #menu-toggle { position: fixed; transform: translateX(-500px); } #menu-toggle:checked ~ .hamburger > span:first-child { transform: translateY(8px) rotate(45deg); } #menu-toggle:checked ~ .hamburger > span:nth-child(2) { opacity: 0; } #menu-toggle:checked ~ .hamburger > span:last-child { transform: translateY(-8px) rotate(-45deg); } #menu-toggle:checked ~ .wrapper { overflow: hidden; } #menu-toggle:checked ~ .wrapper nav { transform: translateX(0); } #menu-toggle:checked ~ .wrapper nav ul li { opacity: 1; transform: translateY(0); } #menu-toggle:checked ~ .wrapper .page-content { filter: blur(5px); opacity: .2; } .wrapper { max-width: 100%; max-height: 100%; overflow: auto; } .page-content { display: block; transition: .5s ease-in-out; } .page-content { background: white; padding: 80px 20px 20px 20px; } .page-content p { margin: 0 auto 20px auto; max-width: 800px; } .page-content p:last-child { margin-bottom: 0; } .hamburger { position: fixed; top: 12px; left: 12px; z-index: 100; background: rgba(255, 255, 255, 0.85); height: 40px; width: 40px; border-radius: 5px; backdrop-filter: blur(5px); } .hamburger > span { display: block; width: calc(100% - 16px); height.........完整代码请登录后点击上方下载按钮下载查看
网友评论0