css布局实现扁平菜单导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现扁平菜单导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cairo'> <style> .menu { position: relative; box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5); background: black; text-transform: uppercase; text-align: center; letter-spacing: 0.25em; font-size: 1.5em; padding: 0; margin: 0; list-style-type: none; display: inline-block; } .menu .menu-item { position: relative; z-index: 1; } .menu a { display: block; color: inherit; text-decoration: none; padding: 0.75em 4em 0.75em 4em; } .menu li:nth-child(1) { background: #22267b; } .menu li:nth-child(2) { background: #1d2069; } .menu li:nth-child(3) { background: #181b56; } .menu li:nth-child(4) { background: #131544; } .menu li:nth-child(5) { background: #0e0f31; } .magic-line { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 0; pointer-events: none; -webkit-transition: background 0.3s, -webkit-transform 0.3s; transition: background 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, background 0.3s; transition: transform 0.3s, background 0.3s, -webkit-transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; } .magic-line:before, .magic-line:after { content: ""; position: absolute; top: 0; height: 100%; background: inherit; width: 0.5em; box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5); } .magic-line:before { right: 100%; border-radius: 3px 0 0 3px; } .magic-line:after { left: 100%; border-radius: 0 3px 3px 0; } html, body { height: 100%; } body { color: #fff; font-family: "Cairo", sans-serif; line-height: 1.25; } main { background: radial-gradient(ellipse farthest-corner at center top, #17b794, #09493b); height: 100%; min-height: 20em; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } </style> </head> <body translate="no" > <main> <ul class='menu'> <li class='menu-item'> <a href='home.html'>home</a> </li> <li class='active menu-item'> <a href='gallery.html'>gallery</a> </li> <li class='menu-item'> <a href='about.html'>about</a> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0