css实现自适应metro风格菜单弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现自适应metro风格菜单弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,700|Shrikhand"); * { box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.4; background-image: url(//repo.bfw.wiki/bfwrepo/image/5fc1a9b3bd22e.png); background-size: cover; } @media (min-width: 450px) { body { font-size: 1.25rem; } } .page-header { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; position: fixed; top: 0; right: 0; left: 0; overflow: visible; padding: 1rem; z-index: 200; } .page-content { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 1rem; min-height: 100vh; text-align: center; color: white; } .page-tagline { font-size: 0.75rem; font-weight: 700; z-index: 100; } .page-tagline a { color: #123965; text-decoration: none; } .page-title { margin-bottom: 1.5rem; font-family: 'Shrikhand', serif; font-size: 2rem; line-height: 1.2; } @media (min-width: 450px) { .page-title { font-size: 3rem; } } nav { display: -webkit-box; display: flex; position: absolute; top: 0; left: 0; padding: 3rem 1rem 1rem; width: 100vw; min-height: 100vh; text-align: center; background-color: white; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: opacity 0.45s 0.45s ease, -webkit-transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, -webkit-transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, transform 0s 1.2s, -webkit-transform 0s 1.2s; } .menu ol { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; width: 100%; } @media (min-width: 820px) { .menu ol { grid-template-columns: repeat(4, 1fr); } } .menu ol li { display: grid; grid-column: span 1; grid-gap: 1rem; overflow: hidden; } .menu ol a { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; padding: 1rem; width: 100%; height: 100%; font-size: 1.25rem; text-decoration: none; color: #2269BB; background-color: #2269BB; border-radius: 2px; } @media (min-width: 45.........完整代码请登录后点击上方下载按钮下载查看
网友评论0